Почему jqueryui.dialog игнорирует параметр высоты, когда выбранный элемент является таблицей?

Question

Когда я пытаюсь отобразить <table> как диалоговое окно, мой параметр height:750, похоже, игнорируется;содержимое, высотой более 2100 пикселей, заставляет диалоговое окно отображаться на той же высоте, делая прокрутку всей страницы: (пример)

Кроме того, здесь есть вызов $("table").dialog(), гдетаблица короче , чем параметр.В этом примере диалоговое окно уменьшается по высоте, чтобы соответствовать содержимому ячейки таблицы, снова игнорируя параметр высоты 750. (пример)

Обходные пути:

Визуализация таблиц внутри тега <div>, кажется, устраняет эту проблему, но выглядит довольно глупо:

Короткий стол + Высокий текст, завернутый в div

Длинный стол, завернутый в div

Кроме того, вот мой обходной путь, в котором я отображаюпустой диалог, а затем перетащите таблицу в окно как часть open() обратного вызова:

Обход после рендеринга

Является ли эта поведенческая несогласованность ошибкой илиэто по замыслу?

Answer 1

Не похоже, что открытие диалогового окна таблицы без учета параметра высоты во время инициализации было бы умышленно. Мой опыт показывает, что компоненты пользовательского интерфейса jQuery ведут себя наиболее согласованно, как <div> элементы, и похоже, что вы нашли тот же результат, но, как вы сказали, это не должно быть требованием.

Значением по умолчанию для параметра высоты в dialog () является auto, которое должно масштабировать диалоговое окно, чтобы соответствовать элементу. Возможно, есть ошибка, когда элемент table передается в dialog(), в результате чего auto переопределяет параметры высоты в init. Я попытался изменить значение ширины в вашем первом примере, и dialog() правильно отвечает, изменяя ширину, но высота не сдвигается. Я также переупорядочил параметры, чтобы высота была первой, но это также не имело эффекта.

JS Bin не работает для меня, поэтому я переместил ваш код в эту скрипку и сжал вызов диалога init. https://jsfiddle.net/z601hhjd/

// Open dialog and set height and width on init
// Width option works at initialization but height does not
$(".shortTable").dialog({
     'height':'300',
     'width':'500',
     open: function(event, ui) {
         // Height setter has no effect after init either
         $(this).dialog("option", "height", 200 );

         // Width setter works after initialization too
         $(this).dialog("option", "width", 200 );
     }
});

Похоже, что в jQuery UI есть ошибка для установки высоты для table элементов, которая конфликтует с документацией , но эта функциональность соответствует спецификациям HTML, как сказал @Peri.

Answer 2

Я считаю, что jQuery UI пытается быть слишком умным, когда дело доходит до указания высоты.Он пытается определить высоту своего контейнера и выполнить некоторые вычисления и т. Д. У меня даже были случаи, когда диалоговое окно показывалось бы правильно один раз, а затем получала высоту стиля элемента, назначенную при последующих загрузках того же самого диалога (без изменений в конфигурации диалоговых окон).опции).Как разработчик, я считаю, что мне не очень нравится это «умное» поведение.

Так что после множества онлайн-исследований я пришел к выводу, что вместо того, чтобы доверять jQueryUI, чтобы принимать свои решения за меня,для меня было бы лучше быть немного более явным с тем, что я хотел, установив высоту диалога в открытом событии:

$(".shortTable").dialog({
    'height': '300',
    'width': '500',
    open: function (event, ui) {
        // Make sure the dialog will resize vertically 
        // if we are messing with the DOM elsewhere
        // (injecting/removing DOM elements)
        $(this).css("height", "auto");
    }
});

Конечно, вместо «авто» вы можете установить конкретное измерение px, если оносоответствует вашим потребностям, но auto должен позволять его размер в соответствии с любым содержимым, которое вы вставляете туда, включая таблицу.

Метод open будет запускаться каждый раз, когда открывается диалоговое окно, поэтому, если вы переписали содержимое диалога с помощьюкакая-то другая проверка jQuery или выбор контента ajax все равно будет счастливым.

Answer 3

Разве это не потому, что вы не можете установить высоту на столе? Для таблицы нет атрибута высоты - http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1. Вы можете заключить таблицу в div, и тогда она заработает. Диалог содержит прокрутку.

http://jsbin.com/omuzoq/2/edit

Answer 4

Попробуйте добавить топ NN в открытый блок:

$( "#dlgEx" ).dialog({
    ...,
    open: function(event, ui) {
        $(this).dialog("option", "top", 10 );
    },

Answer 5

Таким образом, при открытии диалогового окна атрибут высоты заменяется, поскольку плагин добавляет к нему собственную высоту относительно размера экрана (вы можете проверить это, выполнив просмотр источника).поэтому, чтобы использовать вычисленные атрибуты высоты, нам нужно отключить все стили, добавленные этим плагином

 $( "#dialog_confirm_message" ).dialog({
                        autoOpen: false,
                        modal: true,
                        open: function(event, ui) {
                                                  $('#dialog_confirm_message').removeAttr('style');
                        },
                        minHeight: 104,
                        height: 120,
                        width: 520
                       });