не удалось установить минимальную ширину диалогового окна jquery ui

Question

Я пытался использовать JQuery UI диалог.Но я не могу установить минимальную ширину и высоту.Вот мой код

 var options={
                modal: true,
                title:headertext,
                minHeight:125,
                minWidth:520,
                maxWidth:1000,
                maxHeight:1000,
                dialogClass:"sfFormwrapper"};
            $('#'+popupid ).dialog(options);

Но в браузере он отображается как

height:auto ; width:520px

Спасибо!

Answer 1

У вас сложилось впечатление, что параметры minWidth, minHeight, maxWidth и maxHeight отображаются непосредственно в правила стиля CSS min-width, min-height, max-width и max-height, соответственно. На самом деле это не так.

Правила стиля в вашем вопросе взяты из самого элемента виджета (корень дерева, выставляющий класс ui-dialog). Обратите внимание, что опция minWidth преобразуется в правило width, которое на самом деле является динамическим: оно управляется виджетом и будет изменяться при изменении размера диалогового окна.

Таким же образом, к исходному элементу, дополненному виджетом диалога, применяются динамические правила width, height и min-height.

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

Answer 2

Мин. / Макс. Просто управляйте минимумом, который вы можете изменить. Если вы хотите установить определенную высоту, используйте высоту / ширину. Также может потребоваться передать имя метода option в вызове dialog ().

 var options={
            modal: true,
            title:headertext,
            height: 500,
            minHeight:125,
            minWidth:520,
            maxWidth:1000,
            maxHeight:1000,
            dialogClass:"sfFormwrapper"};
 $('#'+popupid ).dialog('option', options);

Answer 3

Простой ответ

$( "#info" ).dialog({
  draggable: false,
  autoOpen: false,
  resizable: false,
  width: '40%',
  height: 450,
  modal: true 
});

$( ".info" ).click(function( event ) {
  $( "#info" ).dialog( "open" );
  $( ".ui-dialog").css({'min-width': '350px'});
  event.preventDefault();
});

Answer 4

Используйте это так:

$('#'+popupid).dialog({ width:400, height:300, maxWidth: 800, maxHeight: 500, minWidth: 300, minHeight: 200 });

Answer 5

Просто используйте CSS!

.ui-widget-content {
min-width: 360px;
}

Или

минимальная ширина: 25%;