Диалоговое окно JQueryUI maxWidth недостаточно - PullRequest
Новая
       11

Диалоговое окно JQueryUI maxWidth недостаточно

2 голосов
/ 20 октября 2011

У меня есть диалог jqueryui, определенный с maxWidth. 

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

maxWidth работает, как и предполагалось, когда я изменяю размер формы с помощью ручки изменения размера. Но форма содержит вкладки (получающиеся в две строки) и другие элементы, которые пытаются занять все заданное пространство.

Когда я открываю форму, она попадает в правый край браузера. Когда я перемещаю окно мышью влево, размер диалогового окна автоматически изменяется, поскольку справа появляется больше места.
Тем не менее, он не останавливается на maxWidth.

Если я возьму ручку изменения размера, если она больше maxWidth, она снова изменит размер до maxWidth.

Кроме того, заголовок диалогового окна не является шириной диалогового окна, пока он не будет изменен путем изменения размера области просмотра или использования ручки изменения размера.

Вот пример: http://jsfiddle.net/CarlR/PvE3P/22/

Надеюсь, описание достаточно понятно. Вы можете попробовать это на jsfiddle. Проблема в том, когда диалоговое окно отображается в первый раз.
(Я использую Google Chrome кстати)

Ответы [ 3 ]

4 голосов
/ 25 октября 2011

Вот jsfiddle того, что, я думаю, вы ищете http://jsfiddle.net/PvE3P/41/. Я привязал к $ (window) .resize () и динамически обновляю ширину диалога в зависимости от ширины окна. Надеюсь, это поможет!

EDIT:

Я обновил jsfiddle для более легкой работы. http://jsfiddle.net/PvE3P/42/

1 голос
/ 23 октября 2013 
.ui-dialog {
   ...
   max-width: 400px;
}
1 голос
/ 24 октября 2011

Вы можете судить по коду 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/

...