[解決済み] jQuery UIダイアログをajaxで読み込んだコンテンツの幅に合わせて自動的にリサイズする。

質問

私はこれに関する具体的な情報と例を見つけるのに非常に困っています。 私は、私のアプリケーションで多くのjQuery UIダイアログを持っていて、.ajax()呼び出しでロードされるdivに接続されています。 それらはすべて同じセットアップ呼び出しを使用しています。

 $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });

ロードされるコンテンツの幅に合わせてダイアログのサイズを変更したいだけです。 今現在、幅は300px（デフォルト）のままで、水平スクロールバーが表示されます。

私が知る限り、"autoResize" はもはやダイアログのオプションではなく、私がそれを指定しても何も起こりません。

ダイアログごとに別の関数を書かないようにしているので .dialog("option", "width", "500") は、各ダイアログの幅が異なるため、実際にはオプションではありません。

指定する width: 'auto' を指定すると、ダイアログがブラウザウィンドウの幅の100%を占めるようになります。

私のオプションは何ですか？ 私は jQuery 1.4.1 と jQuery UI 1.8rc1 を使用しています。これは本当に簡単なことであるべきだと思われます。

EDIT: 私はこれのための不器用な回避策を実装しましたが、私はまだ良い解決策を探しています。

どのように解決するのですか?

JQuery 1.4.1 と UI 1.8rc1 を使って、小さなサンプルアプリを書いたところです。 私がしたことは、コンストラクタを次のように指定したことだけです。

var theDialog = $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width:'auto'
});

ブラウザウィンドウの幅を100%占有するとのことですが、FF3.6、Chrome、IE8でテストしたところ、問題なく動作しました。

私は AJAX 呼び出しを行わず、ダイアログの HTML を手動で変更するだけですが、それが問題を引き起こすとは思えません。 他の CSS 設定でこれをノックアウトすることができますか?

これの唯一の問題は、幅が中央から外れてしまうことですが、私はこれを見つけました。 サポートチケット を配置するという回避策を提供しています。 dialog('open') ステートメントを setTimeout 内に配置することで問題を解決しています。

私のheadタグの中身はこんな感じです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function(){
        var theDialog = $(".mydialog").dialog({
            autoOpen: false,
            resizable: false,
            modal: true,
            width: 'auto'
        });

        $('#one').click(function(){
            theDialog.html('some random text').dialog('open');
        });

        $('#two').click(function(){
            theDialog.html('<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long text string to see if width changes</li></ul>').dialog('open');
        });

        $('#three').click(function(){
            //this is only call where off-centre is noticeable so use setTimeout
            theDialog.html('<img src="./random.gif" width="500px" height="500px" />');
            setTimeout(function(){ theDialog.dialog('open') }, 100);;
        });
     });
</script>

Jquery UI用のjsとcssは、以下のサイトからダウンロードしました。 http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip . と本文に記載。

<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>