Сделать так, чтобы диалоговое окно JQuery UI автоматически увеличивалось или уменьшалось в соответствии с его содержимым

131

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

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

jquery jquery-ui jquery-ui-dialog MikeN
источник
1
Предлагаю выложить образец кода, сложно порекомендовать решение, не видя структуры диалога.
Diego

Ответы:

139

Обновление: начиная с 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

CGP
источник
Хм ... придется расширить мой FrameDialog ... по сути, это метод, который создает содержимое iframed для использования с диалогом ... он не идеален, но хорошо работает для проекта, для которого он мне нужен.
Tracker1
20
Это не сработало для меня. Вместо этого я установил для параметра «ширина» значение «авто».
Сэм
+1 к комментарию - это сработало для меня, и пример тоже работает, поэтому я должен представить, что это не изменилось, но эй, если все остальное не удается, попробуйте.
cgp 02
Это не работает для ширины, я думаю, это работает только для высоты.
Walt W
18
Этот ответ больше не действителен для версии 1.8.4, вместо этого используйте высоту auto forum.jquery.com/topic/dialog-auto-width
Джефф
48

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

autoResize:true

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

MikeN
источник
9
Потрясающе :), но почему jQuery не поместил это в свою документацию?!. В любом случае спасибо.
Вахид Битар
осторожно, не работает с позиционированием плагином триггера (at, my, off и т. д.)
Джеффз
26

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

$("selector").dialog({height:'auto', width:'auto'});
IlludiumPu36
источник
У меня тоже сработало (v1.11.1).
Джей Камминс
11

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

$('#selector').dialog({
     minHeight: 'auto'
});
emolah
источник
2

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

Ширина нет!

Чтобы сделать что-то вроде автоматического, получите размер отображаемого 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);
    }
Демз
источник
2

Если он вам нужен для работы в 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 
var w = $('#dialogText').text().length;

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

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

user596393
источник