web-dev-qa-db-ja.com

JQuery UIダイアログをその内容に合わせて自動的に拡大または縮小する

フォームを表示するJQuery UIダイアログポップアップがあります。フォームで特定のオプションを選択すると、新しいオプションがフォームに表示され、背が高くなります。これは、メインページにスクロールバーがあり、JQuery UIダイアログにスクロールバーがあるシナリオにつながる可能性があります。この2本のスクロールシナリオは見苦しく、ユーザーを混乱させます。

スクロールバーを表示せずに常にコンテンツに合わせてJQuery UIダイアログを拡大（および縮小）するにはどうすればよいですか？メインページのスクロールバーのみが表示されることを希望します。

jqueryjquery-uijquery-ui-dialog
126
MikeN

更新：jQuery UI 1.8の時点で、作業ソリューション（2番目のコメントで述べたように）は以下を使用することです。

width: 'auto'

AutoResize：trueオプションを使用します。私が説明します：

  <div id="whatup">
    <div id="inside">Hi there.</div>
  </div>
   <script>
     $('#whatup').dialog(
      "resize", "auto"
     );
     $('#whatup').dialog();
     setTimeout(function() {
        $('#inside').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      }, 1000);
   </script>

これが実際の例です： http://jsbin.com/ubowa

136
cgp

答えは

autoResize:true

ダイアログ作成時のプロパティ。これが機能するためには、ダイアログの高さを設定できません。そのため、その作成者メソッドまたは任意のスタイルを介してダイアログの固定高さをピクセル単位で設定すると、autoResizeプロパティは機能しません。

46
MikeN

これはjQuery UI v1.10.3で動作します

$("selector").dialog({height:'auto', width:'auto'});
24
IlludiumPu36

私はうまく機能する次のプロパティを使用しました：

$('#selector').dialog({
     minHeight: 'auto'
});
11
emolah

高さは自動にサポートされています。

幅は違います！

何らかの自動を行うには、表示しているdivのサイズを取得してから、ウィンドウを設定します。

C＃コード内.

TheDiv.Style["width"] = "200px";

    private void setWindowSize(int width, int height)
    {
        string widthScript =    "$('.dialogDiv').dialog('option', 'width', "    +   width   +");";
        string heightScript =   "$('.dialogDiv').dialog('option', 'height', "   +   height  + ");";

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
            "scriptDOWINDOWSIZE",
            "<script type='text/javascript'>"
            + widthScript
            + heightScript +
            "</script>", false);
    }
2
The Demz
var w = $('#dialogText').text().length;

$("#dialog").dialog('option', 'width', (w * 10));

ダイアログの幅のサイズを変更するために必要なことをしました。

1
user596393

IE7で動作する必要がある場合は、 ドキュメント化されていない、バグあり、サポートされていない{'width':'auto'}オプションを使用できません。代わりに、次を.dialog()に追加します。

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

.scrollWidthに右側のパディングが含まれるかどうかはブラウザーによって異なるため（FirefoxはChromeとは異なります）、主観的な「十分な」ピクセル数を.scrollWidthに追加するか、独自のピクセルに置き換えることができます幅計算関数。

.dialog()オプションにwidth: 0を含めることをお勧めします。この方法では、幅が減少することはなく、増加するだけです。

IE7、IE8、IE9、IE10、IE11、Firefox 30、Chrome 35、およびOpera 22.で動作するようにテスト済み。

1
Vladimir Kornea