web-dev-qa-db-ja.com

jQuery UIダイアログのサイズをajaxによってロードされたコンテンツの幅に自動的に変更します

これに関する特定の情報と例を見つけるのに苦労しています。 .ajax（）呼び出しでロードされるdivにアタッチされたアプリケーションに、jQuery UIダイアログがいくつかあります。すべて同じセットアップコールを使用します。

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

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

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

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

ダイアログオプションにwidth: 'auto'を指定すると、ダイアログがブラウザウィンドウの幅の100％を占めるだけになります。

私のオプションは何ですか？ jQuery UI 1.8rc1でjQuery 1.4.1を使用しています。これは本当に簡単なものでなければならないようです。

編集：私はこれのために狂った回避策を実装しましたが、私はまだより良い解決策を探しています。

javascriptjqueryajaxjquery-uijquery-ui-dialog
133
womp

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

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

これにより、ブラウザウィンドウの幅が100％になりますが、ここではうまく機能し、FF3.6、ChromeおよびIE8でテストされているとおっしゃっています。

ダイアログのHTMLを手動で変更するだけで、AJAX呼び出しは行っていませんが、問題が発生することはないと思います。他のCSS設定がこれをノックアウトする可能性はありますか？

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

ヘッドタグの内容は次のとおりです。

<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>

http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.Zip からJquery UIのjsとcssをダウンロードしました。と体：

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

同じ問題を抱えていて、本当の問題はCSSに関連していると言ってくれてありがとう、私は問題を見つけました：

position:relative CSSルールでposition:absoluteの代わりに.ui-dialogを使用すると、ダイアログとwidth:'auto'が奇妙に動作します。

.ui-dialog { position: absolute;}
11
Fortes

以下がその方法です。

レスポンシブjQuery UIダイアログ（およびmaxWidthバグの修正）

MaxWidthと幅の修正：自動バグ。

3
Jason

何らかの理由でIE7でこの全ページ幅の問題を抱え続けたため、このハックを作成しました。

var tag = $("<div></div>");
//IE7 workaround
var w;
if (navigator.appVersion.indexOf("MSIE 7.") != -1)
    w = 400;
else
    w = "auto";

tag.html('My message').dialog({
    width: w,
    maxWidth: 600,
    ...
2
Alex

最大幅を指定することにより、100％幅の問題を回避できます。 maxWidth オプションは機能しないようです。そのため、代わりにダイアログウィジェットでCSS max-widthプロパティを設定します。

最大高さも制限したい場合は、 maxHeight オプションを使用します。必要なときにスクロールバーを正しく表示します。

$(function() {
  var $dialog = $("#dialog");
  $dialog.dialog({
    autoOpen: false,
    modal: true,
    width: "auto"
  });
  /*
   * max-width should be set on dialog widget because maxWidth option has known issues
   * max-height should be set using maxHeight option
   */
  $dialog.dialog("widget").css("max-width", $(window).width() - 100);
  $dialog.dialog("option", "maxHeight", $(window).height() - 100);
  $(".test-link").on("click", function(e) {
    e.preventDefault();
    $dialog.html($(this.hash).html());
    // if you change the content of dialog after it is created then reset the left
    // coordinate otherwise content only grows up to the right Edge of screen
    $dialog.dialog("widget").css({ left: 0 });
    $dialog.dialog("open");
  });
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog"></div>

<!-- test links -->

<p>
  <a href="#content-1" class="test-link">Image (Landscape)</a>
  <a href="#content-2" class="test-link">Image (Portrait)</a>
  <a href="#content-3" class="test-link">Text Content (Small)</a>
  <a href="#content-4" class="test-link">Text Content (Large)</a>
</p>
<p>If you are viewing in Stack Snippets > Full page then reload the snippet so that window height is recalculated (Right click > Reload frame).</p>

<!-- sample content -->

<div id="content-1" style="display: none;">
  <img src="https://i.stack.imgur.com/5leq2.jpg" width="450" height="300">
</div>

<div id="content-2" style="display: none;">
  <img src="https://i.stack.imgur.com/9pVkn.jpg" width="300" height="400">
</div>

<div id="content-3" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
</div>

<div id="content-4" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
  <p>Aenean eu magna tempor, pellentesque arcu eget, mattis enim. Cras at volutpat mi. Aenean id placerat felis, quis imperdiet nunc. Aenean a iaculis est, quis lacinia nisl. Sed aliquet sem eget justo convallis congue. Quisque rhoncus nulla sit amet cursus maximus. Phasellus nec auctor urna. Nam mattis felis et diam finibus consectetur. Etiam finibus dignissim vestibulum. In eu urna mattis dui pharetra iaculis. Nam eleifend odio et massa imperdiet, et hendrerit mauris tempor. Quisque sapien lorem, dapibus ut ultricies ut, hendrerit in nulla. Nunc lobortis mi libero, nec tincidunt lacus pretium at. Aliquam erat volutpat.</p>
  <p>Fusce eleifend enim nec massa porttitor tempor a eget neque. Quisque vel augue ac urna posuere iaculis. Morbi pharetra augue ac interdum pulvinar. Duis vel posuere risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae lectus non nisl iaculis volutpat nec vitae ante. Maecenas quis condimentum elit. Sed nisl urna, convallis ut pellentesque sit amet, pellentesque eget quam. Pellentesque ornare sapien ac scelerisque pretium. Pellentesque metus tortor, accumsan in vehicula iaculis, efficitur eget nisi. Donec tincidunt, felis vel viverra convallis, lectus lectus elementum magna, faucibus viverra risus nulla in dolor.</p>
  <p>Duis tristique sapien ut commodo laoreet. In vel sapien dui. Vestibulum non bibendum erat. Etiam iaculis vehicula accumsan. Phasellus finibus, elit et molestie luctus, massa arcu tempor nulla, id hendrerit metus mauris non mi. Morbi a ultricies magna. Proin condimentum suscipit urna eu maximus. Mauris condimentum massa ac egestas fermentum. Praesent faucibus a neque a molestie. Integer sed diam at eros accumsan convallis.</p>
</div>
2
Salman A

ダイアログのfloat：leftを設定するとうまくいくと思います。おそらく、ダイアログはプラグインによって絶対的に配置されます。その場合、その位置はこれによって決定されますが、フロートの副作用（コンテンツを保持するために必要な幅だけ要素を作成する）は引き続き有効です。

これは、次のようなルールを置くだけで機能するはずです。

.myDialog {float:left}

スタイルシートで、ただしjQueryを使用して設定する必要がある場合があります

2
wheresrhys

対応するテーマをアップグレードせずにjquery UIを1.8.1にアップグレードすると、同じ問題が発生しました。テーマもアップグレードするためにのみ必要で、「自動」が再び機能します。

2
Jesús Alonso

同様の問題がありました。

widthを"auto"に設定するとうまくいきましたが、ダイアログに多くのテキストが含まれている場合、maxWidthの設定を無視して、ページの幅全体に表示されました。

ただし、maxWidthにcreateを設定するとうまくいきます：

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});
1
tsi

私もこの問題を抱えていました。

私はこれで動作させました：

.ui-dialog{
    display:inline-block;
}
1
Ken Q

あなたがする必要があるのは、追加するだけです：

width: '65%',
0
Taggart Jensen

私は同じ問題を抱えており、位置を持っています：.ui-dialog {} cssの絶対値では十分ではありませんでした。 position：relativeが実際の要素の直接スタイルに設定されていることに気づいたため、.ui-dialog css定義が上書きされていました。位置の設定：divで絶対ダイアログを静的に作成しようとしても機能しませんでした。

最後に、ローカルjQueryに配置された2つを変更して、この機能を実現しました。

JQueryの次の行を次のように変更しました。

elem.style.position = "absolute";

https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62

また、ダイアログがドラッグ可能に設定されているため、jQuery-uiのこの行も次のように変更する必要がありました。

this.element[0].style.position = 'absolute';

https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48

おそらく、私がもっと徹底的に持っているスタイルを経験することで問題は解決するでしょうが、これがどのように機能するかを共有すると思いました。

0
Scott

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.で動作するようにテスト済み。

0
Vladimir Kornea