Question

我有一个用maxWidth定义的jqueryui对话框。

$("#myDialog").dialog({
        autoOpen: false,
        width: 'auto',
        maxWidth: 1000,
        height: 'auto',
        position: [250, 50],
        close: function() {
            $("#myViewer").empty();
            someStuff();
        }
    });

当我使用调整大小句柄调整窗体大小时，maxWidth按预期工作。但是表单包含选项卡（结果是两行）和其他试图占用所有给定空间的东西。

当我打开表单时，它会触及正确的浏览器边缘。当我用鼠标向左移动窗口时，对话框会自动调整大小，因为右侧有更多可用空间但是，它不会停在maxWidth。

如果我在大于maxWidth时抓住调整大小手柄，它会调整回大小。

此外，对话框的标题栏不是对话框的宽度，直到通过更改视口大小或使用调整大小手柄来调整对话框的宽度。

以下是一个示例：http://jsfiddle.net/CarlR/PvE3P/22/

我希望描述足够清楚。你可以在jsfiddle上试一试。问题是第一次显示对话框时（我正在使用google chrome btw）

Answer 1

这是我认为你正在寻找的http://jsfiddle.net/PvE3P/41/的jsfiddle。我绑定到$（window）.resize（）并根据窗口宽度动态更新对话框宽度。我希望这有帮助！

编辑：

我已经更新了jsfiddle以更加无缝地工作。 http://jsfiddle.net/PvE3P/42/

Answer 2

你可以在jquery代码中做一些判断，就像这样

$("#showDialog").click(function(){
    $("#myDialog").dialog("open");
    var width = $(".ui-dialog").width();
    if(width>400){
        $(".ui-dialog").css({'width':'400px'});
        //fixed if width > 400px, defined width always as 400px 
    }
});

请参阅： http://jsfiddle.net/PvE3P/23/

Answer 3

.ui-dialog {
   ...
   max-width: 400px;
}

JQueryUI对话框maxWidth不足

3 个答案: