Forums

Board index » YUI 3 Gallery Forums: » Gallery Forums » Overlay Extras

Page 1 of 1   [ 2 posts ]
New Topic | Post Reply | Print view

mickoz

  • Joined: Fri Feb 18, 2011 9:29 am
  • Posts: 2
  • Offline
  • Profile
Tags:

IE problem with alignment when enabling OverlayModal, etc.

Post Posted: Fri Feb 18, 2011 9:36 am
+0-
In IE8 (and also when emulating IE7 mode), if I include a doctype, the alignment work fine for the overlay. However, when I begin to use Overlay Extra to have the modal feature, the alignment behavior of the overlay is wrong. I also found in my example, that if I scroll up down a lot, that the behavior is not as expected (the Overlay get out of synch with its alignment). This problem probably affect xy, center, etc. behavior too. Can you please fix OverlayExtras for IE? (In our project we somehow hacked the overlay to create our own modal, but we would prefer to use the clean solution provided by OverlayExtra)

Here is an example code you can test in IE:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
<style>
#overlay {
background-color: yellow;
}
</style>
</head>
<body>
<div style="border:1px solid black; width: 400px; height: 400px">test</div>
<button id="test">test</button>
<div style="border:1px solid black; width: 400px; height: 400px">test2</div>

<div id="overlay" class="yui3-overlay-loading">
    <div class="yui3-widget-hd">Overlay Header</div>
    <div class="yui3-widget-bd">Overlay Body</div>
    <div class="yui3-widget-ft"><button id="hide-overlay">Close</button></div>
</div>



<script>
YUI({}).use('gallery-overlay-extras', function(Y){
    var overlay = new Y.Overlay({
        srcNode   : '#overlay',
        width     : '200px',
        height    : '200px',
        zIndex    : 100,
        render    : true,
        visible   : false,
        plugins   : [
            { fn: Y.Plugin.OverlayModal },         // When this is enabled, the alignment is broken (this probably happen with center, xy, etc.)
            //{ fn: Y.Plugin.OverlayKeepaligned }, // this does not seem to always work partially when you scroll in IE
            //{ fn: Y.Plugin.OverlayAutohide }     // this seems to work
        ]
    });
    Y.one('#test').on('click', function() {
        overlay.set('align', {points: [Y.WidgetPositionAlign.TC, Y.WidgetPositionAlign.TC]});
        //overlay.set('xy', [100, 100]);
        //overlay.set('visible', true);
        //overlay.render();
        overlay.show();
    }
    );
    Y.one('#hide-overlay').on('click', Y.bind(overlay.hide, overlay));
});
</script>

</body>
</html>

mickoz

  • Joined: Fri Feb 18, 2011 9:29 am
  • Posts: 2
  • Offline
  • Profile

Re: IE problem with alignment when enabling OverlayModal, et

Post Posted: Fri Feb 18, 2011 9:39 am
+0-
To see the Modal bug, you can scroll and click on my test button, you will notice that the alignment is not as expected depending on the position of the viewport when clicking on the button.
Page 1 of 1   [ 2 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

No Users Online

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group