Заставьте JQuery UI Dialog автоматически увеличиваться или уменьшаться в соответствии с его содержимым - PullRequest
Новая
       47

Заставьте JQuery UI Dialog автоматически увеличиваться или уменьшаться в соответствии с его содержимым

125 голосов
/ 16 апреля 2009

У меня есть всплывающее диалоговое окно JQuery UI, которое отображает форму. При выборе определенных параметров в форме новые параметры появятся в форме, что приведет к ее росту. Это может привести к сценарию, в котором главная страница имеет полосу прокрутки, а диалоговое окно JQuery UI имеет полосу прокрутки. Этот сценарий с двумя полосами прокрутки неприглядный и запутанный для пользователя.

Как сделать так, чтобы диалоговое окно пользовательского интерфейса JQuery увеличивалось (и, возможно, уменьшалось), чтобы всегда соответствовать его содержимому без отображения полосы прокрутки? Я бы предпочел, чтобы на главной странице была видна только полоса прокрутки.

Ответы [ 7 ]

136 голосов
/ 19 апреля 2009

Обновление: Начиная с jQuery UI 1.8, рабочее решение (как упомянуто во втором комментарии) должно использовать: 

width: 'auto'

Используйте параметр autoResize: true. Я проиллюстрирую: 

  <div id="whatup">
    <div id="inside">Hi there.</div>
  </div>
   <script>
     $('#whatup').dialog(
      "resize", "auto"
     );
     $('#whatup').dialog();
     setTimeout(function() {
        $('#inside').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      }, 1000);
   </script>

Вот рабочий пример: http://jsbin.com/ubowa

45 голосов
/ 16 апреля 2009

Ответ - установить 

autoResize:true

свойство при создании диалога. Для того, чтобы это работало, вы не можете установить любую высоту для диалога. Поэтому, если вы установите фиксированную высоту в пикселях для диалогового окна в его методе создателя или с помощью любого стиля, свойство autoResize не будет работать.

24 голосов
/ 05 июня 2013

Это работает с jQuery UI v1.10.3 

$("selector").dialog({height:'auto', width:'auto'});
11 голосов
/ 06 ноября 2012

Я использовал следующее свойство, которое отлично работает для меня: 

$('#selector').dialog({
     minHeight: 'auto'
});
2 голосов
/ 07 декабря 2011

Высота поддерживается автоматически.

Ширина не!

Чтобы сделать что-то автоматическое, получите размер отображаемого div и затем установите окно с помощью.

В коде C # .. 

TheDiv.Style["width"] = "200px";

    private void setWindowSize(int width, int height)
    {
        string widthScript =    "$('.dialogDiv').dialog('option', 'width', "    +   width   +");";
        string heightScript =   "$('.dialogDiv').dialog('option', 'height', "   +   height  + ");";

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
            "scriptDOWINDOWSIZE",
            "<script type='text/javascript'>"
            + widthScript
            + heightScript +
            "</script>", false);
    }
1 голос
/ 26 июня 2014

Если вам нужно, чтобы он работал в IE7, вы не можете использовать опцию без документов, с ошибками и без поддержки {'width':'auto'}. Вместо этого добавьте следующее к вашему .dialog(): 

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

Включение .scrollWidth отступа справа зависит от браузера (Firefox отличается от Chrome), поэтому вы можете либо добавить субъективное «достаточно хорошее» количество пикселей к .scrollWidth, либо заменить его собственной шириной -счетная функция.

Возможно, вы захотите включить width: 0 в ваши опции .dialog(), так как этот метод никогда не уменьшит ширину, а только увеличит ее.

Протестировано для работы в IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 и Opera 22.

1 голос
/ 31 января 2011 
var w = $('#dialogText').text().length;

$("#dialog").dialog('option', 'width', (w * 10));

сделал то, что мне было нужно, для изменения ширины диалога.

...