У меня много проблем с поиском конкретной информации и примеров по этому вопросу. У меня есть несколько диалоговых окон 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. Кажется, это должно быть чем-то действительно легким.
РЕДАКТИРОВАТЬ: я реализовал грязный обходной путь для этого, но я все еще ищу лучшее решение.
{'width':'auto'}
не работает в IE7 и не будет исправлена, потому что{'width':'auto'}
опция не поддерживается jQuery-UI в соответствии с scott.gonzalez: «Диалог не поддерживает автоматическую ширину. Документы утверждают, что опция принимает только число, которое будет использоваться Размер пикселя указан в нити jquery-ui-dev, где обсуждается, почему мы не поддерживаем автоматическую ширину. "Была такая же проблема, и благодаря тому, что вы упомянули, что настоящая проблема была связана с CSS, я обнаружил проблему:
Наличие
position:relative
вместоposition:absolute
в вашем.ui-dialog
правиле CSS делает диалог иwidth:'auto'
ведет себя странно.источник
Вот как я это сделал:
Отзывчивый диалог jQuery UI (и исправление ошибки maxWidth)
Исправление maxWidth & width: автоматическая ошибка.
источник
Я представляю настройку float: слева для диалога будет работать. Предположительно, диалог полностью позиционируется плагином, и в этом случае его положение будет определяться этим, но побочный эффект float - создание элементов настолько широкими, насколько им необходимо для содержания - все равно вступит в силу.
Это должно работать, если вы просто поместите правило, как
в вашей таблице стилей, хотя вам может потребоваться установить его с помощью jQuery
источник
У меня была такая же проблема, когда я обновил jquery UI до 1.8.1 без обновления соответствующей темы. Только для обновления темы тоже нужно, и «авто» снова работает.
источник
По какой-то причине у меня продолжалась проблема с полной шириной страницы в IE7, поэтому я сделал этот хак:
источник
Вы можете избежать 100% ширины, указав максимальную ширину.
maxWidth
Вариант не кажется на работу; поэтомуmax-width
вместо этого установите свойство CSS в диалоговом виджете.Если вы также хотите ограничить максимальную высоту, используйте
maxHeight
опцию. Он будет правильно отображать полосу прокрутки, когда это необходимо.источник
У меня была похожая проблема.
Установка
width
для"auto"
работал штрафа для меня , но когда диалог содержит много текста , то он сделал это охватывает всю ширину страницы, не обращая внимания наmaxWidth
установку.Установка
maxWidth
наcreate
отлично работает , хотя:источник
У меня тоже была эта проблема.
Я получил это работает с этим:
источник
Все, что вам нужно сделать, это просто добавить:
источник
У меня та же проблема и положение: абсолютного в вашем .ui-dialog {} CSS недостаточно. Я заметил эту позицию: относительный был установлен в прямом стиле фактического элемента, поэтому определение CSS .ui-dialog перезаписывалось. Установка позиции: абсолютная на div Я собирался сделать диалог статически и не работал.
В конце я поменял два места в моем локальном jQuery, чтобы сделать эту работу.
Я изменил следующую строку в jQuery:
по адресу https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62
Кроме того, так как мой диалог был настроен на перетаскивание, мне пришлось изменить эту строку также в jQuery-ui, чтобы она была:
по адресу https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48
Возможно, если пройтись по стилю, который у меня есть, я все исправлю, но подумала, что поделюсь, как это работает.
источник
Если вам нужно, чтобы он работал в IE7, вы не можете использовать недокументированный, с ошибками и неподдерживаемый
{'width':'auto'}
параметр. Вместо этого добавьте следующее.dialog()
:Включение
.scrollWidth
отступов справа зависит от браузера (Firefox отличается от Chrome), поэтому вы можете либо добавить субъективное «достаточно хорошее» количество пикселей.scrollWidth
, либо заменить его собственной функцией вычисления ширины.Возможно, вы захотите включить их
width: 0
в свои.dialog()
опции, так как этот метод никогда не уменьшит ширину, а только увеличит ее.Протестировано для работы в IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 и Opera 22.
источник
отредактируйте это ниже:
источник