PDA

View Full Version : BasicDialog in IE when container has position:absolute



Carina
29 Jan 2007, 6:40 AM
hi,

I was having troubles with the BasicDialog in IE and I hope this post could be helpful to others with the same problem. If this is the wrong place to post this or not a bug, please forgive me and just remove this thread. ;)

Problem: in Firefox the Dialog works just fine. In IE 6 & 7 it opens up, I see the content but I cannot move or close the dialog and it seems somehow disabled with a gray overlay. I can only resize the dialog, no other interaction is possible.

Cause: This only occurs when the markup for the dialog is inside a div that has style="position:absolute".

yui-ext version: 0.40 (nightly build downloaded on 15.1.2007).

How to reproduce:
Take the Hello World Dialog example and add a div with position absolute:



<div style="position:absolute;top:0px;">
<!-- The dialog is created from existing markup.
The inline styles just hide it until it created and should be in a stylesheet -->
<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="ydlg-hd">Hello Dialog</div>
<div class="ydlg-bd">


<div class="ydlg-tab" title="Hello World 1">

<div class="inner-tab">
Hello...



<input type="button" id="theme-btn" value="Toggle Theme" />
</div>
</div>


<div class="ydlg-tab" title="Hello World 2">
<div class="inner-tab">
... World!
</div>
</div>
</div>
</div>
</div>
</div>


Maybe that's useful for someone. Or maybe that's not a bug and just something I've missed (but I couldn't find anything related in the forum or the docs).

Animal
29 Jan 2007, 6:52 AM
The key is in "without this div, everything works fine".

The dialog div must be in the document body, not any other nested element.

http://www.yui-ext.com/manual/faq#i_m_using_a_border_layout_and_have_a_basic_dialog_or_layout_dialog._my_dialog_opens_but_it_s_stuck_behind_the_modal_layer_and_i_can_t_access_it

Carina
29 Jan 2007, 9:48 AM
Aaah, thanks a lot, I didn't check the FAQs!! And I thought it was a bug because it works fine in Firefox...

Unfortunately, I want to open the dialog from a jsp that is included in some kind of master jsp.
I tried

dialog.el.insertAfter(document.body.lastChild);
and

dialog.el.insertBefore(document.body.firstChild);

But that seems to confuse IE: it enlarges the size of the document even when the dialog div is set to visibilty:hidden. This results in vertical scroolbars although the window is large enough for the (visible) content which is not very pretty (but I can't disable the scrollbars because I need them when there is more content).

For now I have a workaround and add the dialog div in the master jsp under a certain condition. But that's no pretty solution, I hope I can come up with a better one...

tryanDLS
29 Jan 2007, 10:01 AM
Why are you trying to insert part of the dialog in the dom? The process of creating the dialog inserts it into the dom.

Carina
29 Jan 2007, 10:45 AM
Due to the design of the rest of the application I want to define the dialog div the way in a place where it would be contained in a div that is positioned absolutely.

This causes the problems I described earlier so I wanted to move it from this position to the end or the beginning of the body so that it is not wrapped in some other div. That works except for the side effects that I mentioned (the overall size of the document increases and I can see scrollbars where no scrollbars should be).

This problem has already been discussed here:
http://www.yui-ext.com/forum/viewtopic.php?t=916&view=next&sid=f05c10c35910860f3f85f7af91ba4f8d, that's where I got the idea from.

Maybe I'm missing something here (again...). Or maybe I should insert all the divs on the fly instead of creating the dialog out of existing markup. Didn't have the time to try that yet.

jack.slocum
29 Jan 2007, 10:50 AM
Can you put up a link demonstrating what you are doing?