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

Посмотрев вЗаставьте JQuery UI Dialog автоматически увеличиваться или уменьшаться в соответствии с его содержимымЯ используюheight: "auto" опция при построении модального диалогового окна jQuery:

<code>$( "#dialog-message" ).dialog({
    autoOpen: false,
    width: "400",
    height: "auto",
    show: "slide",
    modal: true,
    buttons: {
        Ok: function() {
            $( this ).dialog( "close" );
        }
    }
});
</code>

Однако высота не является «растущей». чтобы соответствовать всему содержанию. Я все еще вижу вертикальную полосу прокрутки, как на этом изображении:

jQuery Modal Dialog Image

Есть ли способ в коде определения, который я перечислил, обеспечить достаточное увеличение высоты, чтобы вертикальная полоса прокрутки не отображалась? Или мне нужно сделать это программно перед открытием диалогового окна?

Edit 1
Не уверен, почему, но Chrome отображает это нормально, но IE 8 не так. Мне нужно, чтобы он специально работал в IE 8, поэтому я считаю, что я просто собираюсь поставить нижнее поле для текста.

Ответы на вопрос(4)

что я сделал, чтобы диалоговое окно росло автоматически

$("#edit_dependent").dialog({

  autoOpen:false,

  modal:true,

  width:800,

  position:["center",20],

  minHeight:"auto"

});

насколько это будет полезно, но мне удалось настроить auto-height для работы со следующим кодом:

<html>
<head>
<link href="jqueryUI/css/ui-lightness/jquery-ui-1.8.19.custom.css" 
    rel="stylesheet" type="text/css">
<script src="jquery-1.7.1.js"></script>
<script src="jqueryUI/js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#dialog").dialog({
    autoOpen: false,
    width: "400",
    height: "auto",
    show: "slide",
    modal: true,
    buttons: {
        Ok: function() {
            $( this ).dialog( "close" );
        }
    }
    });
    $("#dialog").dialog('open');
});
</script>

</head>
<body>
<div id="dialog">
1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />
</div>
</body>
</html>

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

Написал код, который исправил это

Поместите уникальный класс в ваш диалог:

dialogClass:"someClassName"

$(".someClassName").resize(function () {
    var totalHeight = 0;
    var children = $(".someClassName").children(); //get all divs inside the dialog
    for (var i = 0; i < children.length; i++) {
        if ($(children[i]).innerWidth() > 15) {
            var childrenHeight = children[i].scrollHeight;
            totalHeight += childrenHeight;//make sure your dialog will be the correct height
        }
    }
    $("#idOfContentWithWrongHeight").innerHeight($("#idOfContentWithWrongHeight")[0].scrollHeight);//put the content at the height it should appear
    $(".someClassName").height(totalHeight);//update the height of the dialog
});

Вот образец Демо

 $( "#dialog-message" ).dialog({
        modal: true,
        height: "auto",
                buttons: {
                    Ok: function() {
                        $( this ).dialog( "close" );
                    }
                }

            });
            setTimeout(function() {
            $('#inside').append("Hello!<br>");
            setTimeout(arguments.callee, 1000);
  },1000);​
 coder02 мая 2012 г., 19:27
Вот еще одна демонстрация с большим количеством текста Jsfiddle.net / dJZPV / 3
 coder02 мая 2012 г., 19:08
Некоторые другие css могут влиять на это. Вы проверили это?
 Zack Macomber02 мая 2012 г., 19:35
Не уверен, почему это плохо для меня ... Я вижу, как твои демки работают нормально, но не могу понять, почему он не будет автоматически изменять размеры для меня. Все, что происходит, это вертикальная полоса прокрутки, которая появляется и растет, когда я пытаюсь привести пример с setTimeout. Фактическое окно не растет
 Zack Macomber02 мая 2012 г., 19:17
Я убрал все остальные CSS кроме пользовательского интерфейса
 Zack Macomber02 мая 2012 г., 19:07
хммм - так что особенного во мне? У меня просто есть обычный неформатированный текст в div для диалога.

Ваш ответ на вопрос