In IE8, jquery-ui's dialog set the height of its contents to zero. How can I fix this?
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: 0p开发者_运维技巧x; width: auto; height: 0px">...</div>
What do I need to do to get the height (and min-height) style attributes set correctly?
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
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>
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)
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-contentclass 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.
加载中,请稍侯......
精彩评论