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选项直接映射到min-width，min-height ，max-width和max-height CSS样式规则。事实并非如此。

你问题中的样式规则来自widget元素本身（树的根，暴露ui-dialog类）。请注意，minWidth选项会转换为width规则，该规则实际上是动态的：它由窗口小部件管理，并会在您调整对话框大小时发生更改。

以同样的方式，对话框小部件增强的原始元素应用了动态width，height和min-height规则。

正如您在this fiddle中看到的那样，如果您使用浏览器开发工具的布局视图，则窗口小部件确保对话框的总大小（包括边框和标题栏）保持在您指定的范围内

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

像这样使用：

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

Answer 4

简单回答

$( "#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 5

只需使用CSS！

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

或

min-width：25％;

无法设置jquery ui对话框最小宽度

5 个答案: