С диалоговым окном jquery UI, все равно, чтобы иметь максимальную высоту и использовать "авто", если ее меньшая

Ответ 1

Вы можете добиться этого, выполнив следующие действия:

HTML

<div id="dialog" title="Dialog Title">
    Dialog content
</div>

JavaScript

$('#dialog').dialog({
    resizable: false,
    minHeight: 0,
    create: function() {
        $(this).css("maxHeight", 400);        
    }
});

Проверьте тестовый пример на jsFiddle.

Ответ 2

Я использую это:

$('#dialog').dialog({
    maxHeight: $(window).height(),
    open: function() {
        $(this).dialog('option', 'maxHeight', $(window).height());
   }
});

Сброс maxHeight в "open" полезен, когда окно изменило размер.

Ответ 3

Вы можете сделать это следующим образом:

 $('#testing').resizable("enable");
 $('#testing').dialog({ maxHeight: 400 });


<div id="testing" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

Ответ 4

После диалога .open() и заполнения .html():

$("#div").css('max-height','500px');

Ответ 5

Ошибка # 4820 в диалоговом окне интерфейса jQuery, и вы можете быть заинтересованы в обходных решениях.

Ответ 6

Я думаю, вы могли бы работать вместе с height и maxHeight и соответствовать высоте диалога, когда высота вашего div-контента < диалог maxheight. Сделайте это, когда диалог open. Вот так:

<div id="dialog">
  <div id="contents">
    <input type="text" style="height:3000px"
  </div>  
</div>


    $('#dialog').dialog({
      autoOpen: false,
      maxHeight:400,
      height:400,
      buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    },
    open:function(){
       var s = $('#contents').height();
       var s2 = $(this).dialog( "option", "maxHeight" );
       if(s < s2){
         $(this).height(s);
       }
    }
});

попробуйте изменить значение style="height:3000px: http://jsbin.com/iwecuf/2/edit

Ответ 7

Позвольте мне бросить 2 цента.

Создайте стиль CSS таким образом

.d-maxheight {  max-height:200px; }

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

$(document).ready(function(){
  $(d).dialog({
    dialogClass: 'd-maxheight',
    height:400
  });
});

Вот пример в jsbin

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

Ответ 8

Вы можете обернуть содержимое диалога в другой div, к которому применена максимальная высота, например так:

<div id="dialog">
  <div style="max-height: 400px;">
      POPUP CONTENTS GO HERE
  </div>
</div>