I thought I had seen a bug report about this on the jQuery site, but now I cannot find it. I’m trying to resize a dialog in IE6. But when the element is resized, the content and title bar don’t resize down. They will resize up if the dialog is made larger, however. The result is that the close button ends up being cut off and the content is clipped if the user resize the dialog to be smaller.
I’ve tried handling the resizeStop event and manually resizing the content and titlebar, but this can gave me weird results. The sizes and positions of elements in the content area were still off. Also, even though I resize the title bar, the close button still doesn’t move back into view. Any ideas? If this is a bug in jQuery-ui, does anyone know a good workaround?
<html> <head> <title>Example of IE6 resize issue</title> <link rel='stylesheet' type='text/css' href='http://ui.jquery.com/repository/latest/themes/flora/flora.all.css' /> <script src='http://www.google.com/jsapi'></script> <script> google.load('jquery', '1'); google.load('jqueryui', '1'); google.setOnLoadCallback( function() { $(document).ready(function() { $('#main-dialog').dialog(); }); }); </script> </head> <body> <div id='main-dialog'> This is just some simple content that will fill the dialog. This example is sufficient to reproduce the problem in IE6. It does not seem to occur in IE7 or FF. I haven't tried with Opera or Safari. </div> </body> </html>
I was able to come up with a solution. If you add the style overflow: hidden to the dialog container div element (which has the css class .ui-dialog-container applied to it), then everything resizes correctly. All I did was add a css rule as follows to the flora theme:
It could also be corrected by executing the following:
This corrected the issue I was seeing under IE6 and has not introduced any problems in FireFox.