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

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

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

更新： 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

答えは設定することです

autoResize:true 

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

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

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

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

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

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

幅はありません！

ある種の自動を行うには、表示している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);
    }

IE7で動作させる必要がある場合は、文書化されて おらず、バグがあり、サポートされていない{'width':'auto'}オプションを使用できません。代わりに、以下をに追加してください.dialog()：

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

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

あなたはあなたのwidth: 0中に含めたいかもしれません.dialog()この方法では幅が減ることはなく、幅を増やすだけなのでオプション。

IE7、IE8、IE9、IE10、IE11、Firefox 30、Chrome 35、およびOpera 22で動作することがテストされています。

var w = $('#dialogText').text().length;

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

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