views:

3735

answers:

2

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"&gt;&lt;/script&gt;
  <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>
A: 

The css may be a factor. Could you change your example so we can see your stylesheet? I've updated the example so that it doesn't depend on having jQuery locally.

<html>
<head>
<title>Example of IE6 resize issue</title>
<link rel="stylesheet" type="text/css" href="?.css" />
<script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<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>
Dave Richardson
+2  A: 

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:

.ui-dialog .ui-dialog-container {
  overflow: hidden;
}

It could also be corrected by executing the following:

if ($.browser.msie && $.browser.version == 6)
{
  $(".ui-dialog-container").css({ overflow: 'hidden' });
}

This corrected the issue I was seeing under IE6 and has not introduced any problems in FireFox.

Harry Steinhilber
Is this a general hasLayout issue? Could adding position:relative or zoom:1 do the same thing?
Steve Paulo
I tried both position:relative and zoom:1, neither corrected the issue like overflow:hidden did.
Harry Steinhilber