У меня появилось диалоговое окно JQuery UI, которое отображает форму. Выбрав определенные опции в форме, новые формы появятся в форме, что приведет к ее росту. Это может привести к сценарию, в котором на главной странице есть полоса прокрутки, а в диалоговом окне JQuery UI есть полоса прокрутки. Этот сценарий с двумя прокрутками является неприглядным и запутанным для пользователя.
Как я могу заставить диалоговое окно интерфейса JQuery расти (и, возможно, сокращаться), всегда соответствовать его содержимому, не показывая полосу прокрутки? Я бы предпочел, чтобы видна только полоса прокрутки на главной странице.
Обновление: Как и в jQuery UI 1.8, рабочим решением (как указано во втором комментарии) является использование:
width: 'auto'
Используйте параметр autoResize: true. Я проиллюстрирую:
<div id="whatup">
<div id="inside">Hi there.</div>
</div>
<script>
$('#whatup').dialog(
"resize", "auto"
);
$('#whatup').dialog();
setTimeout(function() {
$('#inside').append("Hello!<br>");
setTimeout(arguments.callee, 1000);
}, 1000);
</script>
Вот рабочий пример: http://jsbin.com/ubowa
Ответ заключается в установке
autoResize:true
при создании диалога. Для этого вы не можете установить высоту для диалога. Поэтому, если вы установите фиксированную высоту в пикселях для диалога в своем методе создания или в любом стиле, свойство autoResize не будет работать.
Это работает с jQuery UI v1.10.3
$("selector").dialog({height:'auto', width:'auto'});
Я использовал следующее свойство, которое отлично подходит для меня:
$('#selector').dialog({
minHeight: 'auto'
});
Высота поддерживается автоматически.
Ширина не!
Чтобы сделать какой-то авто, получите размер div, который вы показываете, а затем установите окно с помощью.
В коде С#..
TheDiv.Style["width"] = "200px";
private void setWindowSize(int width, int height)
{
string widthScript = "$('.dialogDiv').dialog('option', 'width', " + width +");";
string heightScript = "$('.dialogDiv').dialog('option', 'height', " + height + ");";
ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
"scriptDOWINDOWSIZE",
"<script type='text/javascript'>"
+ widthScript
+ heightScript +
"</script>", false);
}
Если вам нужно, чтобы он работал в 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.
var w = $('#dialogText').text().length;
$("#dialog").dialog('option', 'width', (w * 10));
сделал то, что мне нужно, чтобы изменить размер диалогового окна.