Автоматическое изменение размера диалогового окна jQuery UI по ширине контента, загружаемого ajax - PullRequest
Новая
       17

Автоматическое изменение размера диалогового окна jQuery UI по ширине контента, загружаемого ajax

133 голосов
/ 09 февраля 2010

У меня много проблем с поиском конкретной информации и примеров по этому поводу. У меня есть несколько диалоговых окон jQuery UI в моем приложении, связанных с div, которые загружаются вызовами .ajax (). Все они используют один и тот же вызов настройки: 

 $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });

Я просто хочу изменить размер диалогового окна до ширины загружаемого контента. Прямо сейчас ширина остается на уровне 300 пикселей (по умолчанию), и я получаю горизонтальную полосу прокрутки.

Насколько я могу судить, "autoResize" больше не является опцией для диалогов, и ничего не происходит, когда я ее указываю.

Я пытаюсь не писать отдельную функцию для каждого диалога, поэтому .dialog("option", "width", "500") на самом деле не вариант, так как каждый диалог будет иметь разную ширину.

Указание width: 'auto' для параметров диалога просто заставляет диалоги занимать 100% ширины окна браузера.

Какие у меня варианты? Я использую jQuery 1.4.1 с jQuery UI 1.8rc1. Кажется, это должно быть что-то действительно легкое.

РЕДАКТИРОВАТЬ: я реализовал грязный обходной путь для этого, но я все еще ищу лучшее решение.

Ответы [ 13 ]

0 голосов
/ 06 ноября 2017

Все, что вам нужно сделать, это просто добавить: 

width: '65%',
0 голосов
/ 26 июня 2014

Если вам нужно, чтобы он работал в IE7, вы не можете использовать опцию без документов, с ошибками и без поддержки {'width':'auto'}. Вместо этого добавьте следующее к вашему .dialog(): 

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

Включение .scrollWidth отступа справа зависит от браузера (Firefox отличается от Chrome), поэтому вы можете либо добавить субъективное «достаточно хорошее» количество пикселей к .scrollWidth, либо заменить его собственной шириной -счетная функция.

Возможно, вы захотите включить width: 0 в ваши опции .dialog(), так как этот метод никогда не уменьшит ширину, а только увеличит ее.

Протестировано для работы в IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 и Opera 22.

0 голосов
/ 11 апреля 2013

У меня та же проблема и положение: абсолютного в вашем .ui-диалоге {} css недостаточно. Я заметил эту позицию: относительный был установлен в прямом стиле фактического элемента, поэтому определение CSS .ui-dialog перезаписывалось. Установка позиции: абсолютная на div Я собирался сделать диалог статически и не работал.

В конце я поменял два места в моем локальном jQuery, чтобы сделать эту работу.

Я изменил следующую строку в jQuery: 

elem.style.position = "absolute";

при https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62

Кроме того, так как мой диалог был настроен на перетаскивание, мне пришлось изменить эту строку также в jQuery-ui, чтобы она была: 

this.element[0].style.position = 'absolute';

при https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48

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

Страница:
...