В IE8 диалоговое окно jQuery-ui обнулило высоту своего содержания. Как я могу зафиксировать это?
Я использую jQuery диалоговый виджет UI для рендеринга модального диалогового окна в моем веб-приложении. Я делаю это путем передачи идентификатора желаемого элемента DOM в следующую функцию:
var setupDialog = function (eltId) {
$("#" + eltId).dialog({
autoOpen: false,
width: 610,
minWidth: 610,
height: 450,
minHeight: 200,
modal: true,
resizable: false,
draggable: false,
});
};
Все работает просто великолепно в Firefox, Safari и Chrome. Однако в IE 8, когда диалоговое окно открыто только div.ui-dialog-titlebar видимо - div.ui-dialog-contents не.
Проблема, кажется, что в то время как в современных браузерах, div.ui-dialog-contents установили определенную высоту в ее стиле, т.е. после открытия диалогового окна, получающийся HTML:
<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
style="width: auto; min-height: 198px; height: 448px">...</div>
в то время как в IE8 height атрибут стиля обнуляется, и получающийся HTML:
<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
style="min-height: 0px; width: auto; height: 0px">...</div>
Что я должен сделать для получения height (и min-height) набор атрибутов стиля правильно?
2 ответа
Я не могу воспроизвести вашу проблему с помощью IE 8.0.7600.16385IC, используя следующую тестовую страницу. Мне было бы любопытно посмотреть, как вы показываете диалог. Вы вызываете правильный метод: $ (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>
Нашел это предложение на форуме jquery, которое решает мою проблему (хотя, по общему признанию, неудовлетворительно, поскольку не устраняет основную ошибку).
http://forum.jquery.com/topic/setting-dialog-height-in-ie8-does-not-work
принудительная установка высоты в
.ui -dialog .ui-dialog-contentкласс , включая! important:.ui-dialog .ui-dialog-content { border: 0 ; заполнение: .5em 1em; фон: нет; переполнение: авто; масштаб: 1; height: 300px! important;}Предостережения: фиксированная высота для всех диалогов; изменение размера больше не работает должным образом.