В IE8 диалог jquery-ui устанавливает высоту его содержимого на ноль. Как я могу это исправить? - PullRequest
Новая
       19

В IE8 диалог jquery-ui устанавливает высоту его содержимого на ноль. Как я могу это исправить?

9 голосов
/ 22 апреля 2010

Я использую диалоговый виджет пользовательского интерфейса jquery для визуализации модального диалога в моем веб-приложении. Я делаю это, передавая идентификатор нужного элемента 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)?

Ответы [ 4 ]

6 голосов
/ 20 октября 2011

Решение заключается в вызове .height («auto») после создания диалогового окна. 

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

Кредит: http://norrisshelton.wordpress.com/2011/10/07/ie8-issues-with-jquery-dialog-causes-box-to-have-wrong-height-and-scrollbars/

работал для меня

5 голосов
/ 22 апреля 2010

Я не могу воспроизвести вашу проблему, используя 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>
1 голос
/ 19 июля 2011

Я нашел способ исправить эту проблему, добавив это в конфигурацию: "autoOpen: false"

Затем при загрузке документа, 

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

(например, высота конфигурации 200)

0 голосов
/ 22 апреля 2010

Нашел это предложение на форуме 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; padding: .5em 1em;
background: none; overflow: auto;
zoom: 1; height: 300px !important;}

Предостережения: фиксированная высота для всех диалоги; изменение размера больше не работает должным образом.

...