Блог

Главная - Вопросы по программированию - Диалог jQueryUI с недостаточной максимальной шириной

Диалог jQueryUI с недостаточной максимальной шириной

#jquery #jquery-ui #jquery-ui-dialog #css

#jquery #jquery-пользовательский интерфейс #jquery-ui-dialog #css

Вопрос:

У меня есть диалог 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)

Комментарии:

1. Не могли бы вы опубликовать ссылку на него или какой-нибудь html? 🙂

Ответ №1:

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

Редактировать:

Я обновил jsfiddle, чтобы работать немного более плавно. http://jsfiddle.net/PvE3P/42 /

Ответ №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 /

Комментарии:

1. @Carl R, так чего же хочет твоя цель? какова минимальная ширина? посмотрите, как что-то обновляется http://jsfiddle.net/PvE3P/25/ .

2. Выглядит многообещающе… Я проведу здесь несколько тестов. 🙂

3. Проблема в отсутствии автоматической ширины прямо сейчас. Диалог должен занимать столько места, сколько необходимо, или максимальную ширину. Точно так же, как работает width: ‘auto’.

4. Извините, все еще не совсем понимаю, что вам нужно. The dialog needs to occupy as much space as necessary or the maxWidth вы имеете в виду, что при открытии диалогового окна ширина равна 400px (max-width), тогда клиент может автоматически регулировать ширину (с максимальной ширины 400 пикселей до 0)?

5. На самом деле это форма с вкладками, которые все загружаются ajax. Форма не может быть больше 1000 пикселей, потому что это нарушает макет, но она должна использовать столько экранного пространства, сколько необходимо (в отношении содержимого) и возможно (в отношении размера окна браузера). Это означает, что при загрузке диалогового окна его ширина обычно будет составлять около 800-1000 пикселей, и пользователь может изменить его размер. В настоящее время все работает нормально, за исключением того, что, когда пользователь перетаскивает диалоговое окно влево, в первый раз оно растет справа без ограничений. Но 400 пикселей было проще отображать в jsfiddle.

Ответ №3:

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