web-dev-qa-db-ja.com

jquery UIダイアログで、とにかく最大の高さを持ち、それよりも小さい場合は「auto」を使用しますか

ダイアログに高さの最大値を設定したいのですが、コンテンツが小さい場合は、縮小して何をするかですheight = 'auto'します。これはJQuery UIダイアログで可能ですか？

jqueryjquery-ui-dialog
23
leora

これを行うには、次のようにします。

[〜＃〜] html [〜＃〜]

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

JavaScript

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

jsFiddleのテストケース を確認してください。

36
mekwall

私はこれを使います：

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

「open」でmaxHeightをリセットすると、ウィンドウのサイズが変更されたときに役立ちます。

15
clime

あなたはこのようにそれを行うことができます：

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


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

ダイアログ.open()の後、.html()で埋めます：

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

Bug＃482 jQuery UI Dialogが該当し、回避策に興味があるかもしれません。

1
Jonathon Hill

あなたのheightとmaxHeightを併用して、divコンテンツの高さ<ダイアログの最大高さのときにダイアログの高さに合わせることができると思います。ダイアログが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:3000pxvalueを変更してみてください： http://jsbin.com/iwecuf/2/edit

1
anmarti

次のように、ダイアログの内容を、max-heightが適用された別のdivでラップできます。

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

２セント入れましょう。

そのようなCSSスタイルを作成します

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

次に、ダイアログにそのクラスをダイアログに適用するように伝えます

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

これはjsbinの例です

コンテンツが最大の高さよりも小さい限り、自動的にサイズが調整されます。そうでない場合、最大の高さが有効になり、ダイアログ内にスクロールバーが表示されます。

0
David