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

119

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

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

  • 1
    Я бы предложил опубликовать пример кода, трудно порекомендовать решение, не видя структуру диалога.
Теги:
jquery-ui-dialog

7 ответов

133
Лучший ответ

Обновление: Как и в 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

Поделиться
  • 0
    Хм ... придется расширить мой FrameDialog ... это, по сути, метод, который создает контент iframed для использования с диалогом ... он не идеален, но работает хорошо для проекта, для которого он мне нужен.
  • 20
    Это не сработало для меня. Вместо этого я установил опцию «ширина» на «авто».
Показать ещё 7 комментариев
40

Ответ заключается в установке

autoResize:true

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

Поделиться
  • 9
    Фантастика :) но почему jQuery не поместил это в свою документацию ?! В любом случае спасибо.
  • 0
    осторожно, не работает с позиционированием плагином триггера (при, моем, выключенном и т. д.)
21

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

$("selector").dialog({height:'auto', width:'auto'});
Поделиться
  • 0
    Это сработало лучше для меня. Благодарю.
  • 0
    Работал для меня тоже (v1.11.1).
9

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

$('#selector').dialog({
     minHeight: 'auto'
});
Поделиться
2

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

Ширина не!

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

В коде С#..

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

Если вам нужно, чтобы он работал в 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));

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню