YUI2 Dialog not hiding dialog markup correctly

Question

With YUI's Dialog widget, it works well except that with large dialogs (think lots of content), a noticable side effect appears in the page... lots of whitespace at the end of the page and a scrollbar.

Here's an example:

-> http://jsbin.com/ekaca4

All I did was take the original example for the Dialog at developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html and add more markup (in the form of Lorem Ipsum).

If you look at the way the code is set up, the markup (in #dialog1) is completely visible on the page until Yahoo.util.Event.onDomReady fires, and the Dialog is instantiated in

YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
      { width : "30em",
        fixedcenter : true,
        visible : false, 
        constraintoviewport : true,
        buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
             { text:"Cancel", handler:handleCancel } ]
      }); 

At which point the plain jane <div id="dialog1"> which is holding all my markup gets wrapped by a container, <div class="yui-panel-container yui-dialog yui-overlay-hidden shadow" id="dialog1_c" style="visibility: hidden; z-index: 2; left: 307px; top: 10px;"> .

This would be fine, except this content is still very much part of my layout, and the scrollbar and vertical space is present. If I try to add styles to the yui-overlay-hidden like display:none or height:0; overflow:hidden, I get weird side effects like the overlay being positioned incorrectly when it's shown. So far the only way that's had any real affect has been putting #dialog1 in a containing div with height:0; overflow:hidden, but that doesn't work in IE7 (whitespace is still present on the page after init).

Thanks for your help, I really appreciate it.

Answer 1

I put all of my dialogs in a div with the following css:

div.dialogs{display:none;position:fixed;top:0px;left:80px;

Works fine so far, I no longer have the scroll bar and vertical space due to the dialogs. I include display:none to hide the html until after the dialogs have been rendered, once they have been rendered I change the display to "block". Without this the pre-rendered html is visible for a second or two, causes the page to kinda flicker.