In IE8, jquery-ui's dialog set the height of i

2020-07-06 08:09发布

站内问答 / jQuery
1569 4 6

I am using jquery UI's dialog widget to render a modal dialog in my web application. I do this by passing the ID of the desired DOM element into the following function:

var setupDialog = function (eltId) {
  $("#" + eltId).dialog({
    autoOpen: false,
    width: 610,
    minWidth: 610,
    height: 450,
    minHeight: 200,
    modal: true,
    resizable: false,
    draggable: false,
  });
};

Everything works just fine in Firefox, Safari, and Chrome. However, in IE 8 when the dialog is opened only the div.ui-dialog-titlebar is visible -- the div.ui-dialog-contents are not.

The problem seems to be that while in the modern browsers, the div.ui-dialog-contents has a specific height set in its style, i.e. after opening the dialog, the resulting HTML is:

<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
     style="width: auto; min-height: 198px; height: 448px">...</div>

while in IE8 the height style attribute is set to zero, and the resulting HTML is:

<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
     style="min-height: 0px; width: auto; height: 0px">...</div>

What do I need to do to get the height (and min-height) style attributes set correctly?

4条回答
SAY GOODBYE
2楼-- · 2020-07-06 08:25

I found the way to fix this issue was to add this to the config: "autoOpen: false"

Then on document load,

if ($('#DIV_BookingDetails')) {
   $('#DIV_BookingDetails').dialog('open');
   $('#DIV_BookingDetails').height(150);
}

(eg the config height is 200)

查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
3楼-- · 2020-07-06 08:30

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">
<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"></script>    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
    <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>
查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
4楼-- · 2020-07-06 08:36

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.

查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
5楼-- · 2020-07-06 08:38

The solution is to call .height(‘auto’) after the dialog is created.

$(document).ready(function() {
    $('#phoneDataButton').click(function() {
        $('#phoneDataSearchForm').dialog({
           modal:true,
           width: 700,
           close: function() {
               $('#phoneSearchResults').html("");
               location.reload(true);
           }
        }).height('auto')
    })
 })

Credit: http://norrisshelton.wordpress.com/2011/10/07/ie8-issues-with-jquery-dialog-causes-box-to-have-wrong-height-and-scrollbars/

Worked for me

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)