ansaurus

Question

In IE8, jquery-ui's dialog set the height of its contents to zero. How can I fix this?

Answer 1

+2 A:

I can not reproduce your problem using IE 8.0.7600.16385IC using the following test page. I'd be curious to see how you're showing the dialog. Are you calling the right method: $(selector).dialog('open');?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
        $(function() {

            var setupDialog = function(eltId) {
                $('<h1>hello world!</h1>').dialog({
                    autoOpen: true,
                    width: 610,
                    minWidth: 610,
                    height: 450,
                    minHeight: 200,
                    modal: true,
                    resizable: false,
                    draggable: false
                });
            };
            setupDialog();
        });
    </script>
</head>
<body>

</body>
</html>

Ken Browning 2010-04-22 01:14:58

Re: your question about method -- I'm actually using `$(selector).dialog('open');` http://jqueryui.com/demos/dialog/ doesn't seem to document `dialog('show')`. Am I missing something?

brahn 2010-04-22 16:09:49

Sorry, you're right. It should be `'open'`, not `'show'`.

Ken Browning 2010-04-22 16:11:37

OK, so your code totally works in my browser, so the conclusion is that the problem must be tied to something that seems unrelated in the rest of my code. Alas!Thanks very much for your help.

brahn 2010-04-22 16:26:32

Answer 2

A:

Found this suggestion on the jquery forum, which solves my problem (though admittedly unsatisfying because it doesn't solve the underlying bug).

http://forum.jquery.com/topic/setting-dialog-height-in-ie8-does-not-work

force-setting the height in the .ui-dialog .ui-dialog-content class and including !important:
.ui-dialog .ui-dialog-content {
border: 0; padding: .5em 1em;
background: none; overflow: auto;
zoom: 1; height: 300px !important;}
The caveats: fixed height for all dialogs; resizing no longer works properly.

brahn 2010-04-22 16:01:01

ansaurus

tags:

views:

answers:

In IE8, jquery-ui's dialog set the height of its contents to zero. How can I fix this?

related questions