12

[ JQuery UIダイアログの作成]を調べて、その内容に合わせて自動的に拡大または縮小しheight: "auto"ました。jQueryモーダルダイアログボックスを作成するときに、このオプションを使用しています。

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

ただし、高さはすべてのコンテンツに合うように「成長」しているわけではありません。この画像のように、まだ垂直スクロールバーが表示されています。

jQueryモーダルダイアログ画像

私がリストした定義コードに、垂直スクロールバーが表示されないように高さが十分に大きくなるようにする方法はありますか？または、ダイアログボックスを開く前にプログラムでこれを行う必要がありますか？

編集1
理由はわかりませんが、Chromeはこれを正常に表示していますが、IE8はそうではありません。IE 8で特に機能するために必要なので、テキストに下マージンを付けるだけだと思います。

4

4 に答える 4

9

ダイアログボックスが自動的に拡大するために行ったのはこれだけです

$("#edit_dependent").dialog({

  autoOpen:false,

  modal:true,

  width:800,

  position:["center",20],

  minHeight:"auto"

});
于 2014-04-18T17:35:54.373 に答える
2

それは非常に奇妙です...これがどれほど役立つかはわかりませんが、次のコードで自動高さを機能させることができました:

<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>

基本的には、すでに確立したものと同じ構造を使用しています。

于 2012-05-02T16:44:28.217 に答える
1

これは4年遅れですが、同じ問題があります。

それを修正するコードを書いた

ダイアログに一意のクラスを配置します。

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
});
于 2016-04-21T17:37:22.057 に答える
0

これがサンプルデモです

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

            });
            setTimeout(function() {
            $('#inside').append("Hello!<br>");
            setTimeout(arguments.callee, 1000);
  },1000);​
于 2012-05-02T16:39:35.240 に答える