jQuery Dialog makes scrollbars appear in main content

Question

This test of jQuery dialog makes the scrollbars appear in the main content when the dialog is opened. When I touch the dialog resize, the scrollbars go away. Is it the way I defined the dialog or too much content? Click the [!] in the top right corner to see this. Platform: XPsp3, browsers: FF3.6.3, IE8, Safari 5 Thanks

Answer 1

Why has the dialog container div got the style property position set to relative, this should be absolute going by the jQuery UI demo.

When I change it to absolute in firebug the scrolbar problem resovles itself.

Answer 2

See here for a couple different ways to approach: Opening a Modal Dialog shows a horizontal scroll bar

Quick CSS fix:

.ui-widget-overlay {
   position: fixed;  /* <---------- */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Or call this when you open your dialog:

open: function(event, ui){
    $('body').css('overflow-x', 'hidden');
}