幅が自動に設定されている場合、ダイアログの最大幅は影響を受けません

Question

ダイアログに自動幅と高さを使用しようとしましたが、特定の幅までしか使用しません。 しかし、maxWidthは、開いたダイアログのサイズを手動で変更するまで影響しません。

自動的に幅のチェックがトリガーされますか？

例コード：http://jsfiddle.net/yy9Cd/6/

Answer 1

jQuery UIではこれほど多くの作業はありませんでした。しかし、ここにはあなたがそこに持っているもののための修正があります、明らかに私はmaxWidthを50pxに設定しましたので、変更してください！

$(document).ready(function(){ 

var myDialog = $("#myDialog").dialog({ 
    autoOpen: false, 
    maxWidth: "50px", 
    height: 'auto', 
}); 

$("#showDialog").click(function(){ 
    myDialog.dialog("open"); 
}); 

}); 

Answer 2

は、あなただけの「幅」と「高さ」プロパティを削除することができませんか？ http://jsfiddle.net/Ve79f/

Answer 3

実際にダイアログがその幅を超えないことを保証れるCSSのmax-widthプロパティを設定するが、結果のダイアログが不安定に振る舞うが、（オーバーフローが信頼できない、サイズ変更ハンドルは、間違った場所にあってもよいです）jQueryはあなたの設定を知らないので。ここに私の解決策があります：

var maxWidth = 750; 
    var maxHeight = 600; 

    var popup = $("<div>" + content + "</div>") 
     .dialog({ 
      autoOpen: true, 
      title: title, 
      hide: { effect: 'drop', direction: "up" }, 
      height: 'auto', 
      width: 'auto', 
      maxHeight: maxHeight, 
      maxWidth: maxWidth, 
      modal: modal, 
      buttons: { 
       Ok: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

    var w = popup.dialog("widget").width(); 
    console.log("w=",w); 
    if (w > maxWidth) { 
     popup.dialog("option", "width", maxWidth) 
     popup.dialog("widget").width(maxWidth); 
    } 

    var h = popup.dialog("widget").height(); 
    console.log("h=",h); 
    if (h > maxHeight) { 
     popup.dialog("option", "height", maxHeight) 
     popup.dialog("widget").height(maxHeight); 
    } 

    w = popup.dialog("widget").width(); 
    console.log("w2=",w); 
    h = popup.dialog("widget").height(); 
    console.log("h2=",h); 

Answer 4

少し「反応しやすい」ものをお望みなら、私はこれをお勧めします。ダイアログの最大サイズと最小サイズを修正し、ウィンドウサイズに合わせて調整します。

ダイアログに応じて、minまたはmaxの値を変更します。これらの制限の間に、ウィンドウサイズの50％にスケールされます。それは中心に置かれています。

$(document).ready(function() { 

     var maxWidth = 500; 
     var maxHeight = 300; 
     var minWidth = 250; 
     var minHeight = 180; 

     function diagSize() { 
      var wid = $(window).width() * 0.50; 
      if (wid > maxWidth) { 
       wid = maxWidth; 
      } else if (wid < minWidth) { 
       wid = minWidth 
      } 
      var hei = $(window).height() * 0.50; 
      if (hei > maxHeight) { 
       hei = maxHeight; 
      } else if (hei < minHeight) { 
       hei = minHeight 
      } 
      $("#mydialog").dialog({height: hei, width: wid}); 
      $("#mydialog").dialog("option", "position", {my: "center", at: "center", of: window}); 
     } 

は、その後、あなたのダイアログ：

var mydialog = $("#mydialog).dialog({ 
      autoOpen: false, 
      closeOnEscape: true, 
      modal: true, 
      resizable: false, 
      buttons: { 
       "<spring:message code="action.cancel"/>": function() { 
        $(this).dialog("close"); 
       }, 
       "<spring:message code="action.next"/>": function() { 
        $.post({ 
         url: '/myurl', 
         success: function(data) { 

         }, 
        }); 
       } 
      } 
     }); 

そして最後に、2ケースであなたのダイアログのサイズを変更：ウィンドウをリサイズし、開口部の前に：$（文書を）閉じる

$(window).resize(diagSize); 

$("#btnopenmydialog").on('click', function() { 
    diagSize(); 
    mydialog.dialog("open"); 

.ready

});