Passen Sie die Größe des jQuery-UI-Dialogfelds automatisch an die Breite des von Ajax geladenen Inhalts an

Ich habe große Probleme, spezifische Informationen und Beispiele dazu zu finden. Ich habe eine Reihe von jQuery-UI-Dialogen in meiner Anwendung, die an Divs angehängt sind, die mit .ajax () -Aufrufen geladen sind. Sie alle verwenden denselben Setup-Aufruf:

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

Ich möchte nur, dass die Größe des Dialogfelds auf die Breite des Inhalts angepasst wird, der geladen wird. Im Moment bleibt die Breite nur bei 300px (Standardeinstellung) und ich erhalte eine horizontale Bildlaufleiste.

Soweit ich das beurteilen kann, ist "autoResize" keine Option mehr für Dialoge, und nichts passiert, wenn ich es spezifiziere.

Ich versuche, nicht für jeden Dialog eine eigene Funktion zu schreiben, daher .dialog("option", "width", "500")ist dies keine Option, da jeder Dialog eine andere Breite haben wird.

Wenn Sie width: 'auto'die Dialogoptionen angeben, nehmen die Dialoge nur 100% der Breite des Browserfensters ein.

Was sind meine Optionen? Ich verwende jQuery 1.4.1 mit jQuery UI 1.8rc1. Es scheint, dass dies etwas sein sollte, das wirklich einfach ist.

EDIT: Ich habe dafür eine klobige Problemumgehung implementiert, suche aber immer noch nach einer besseren Lösung.

Ich habe gerade eine winzige Beispiel-App mit JQuery 1.4.1 und UI 1.8rc1 geschrieben. Ich habe lediglich den Konstruktor wie folgt angegeben:

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

Ich weiß, dass Sie gesagt haben, dass dies eine Breite von 100% des Browserfensters einnimmt, aber es funktioniert hier sehr gut, getestet in FF3.6, Chrome und IE8.

Ich mache keine AJAX-Aufrufe, sondern ändere nur manuell den HTML-Code des Dialogfelds, denke aber nicht, dass dies zu Problemen führen wird. Könnte eine andere CSS-Einstellung dies ausschalten?

Das einzige Problem dabei ist, dass die Breite dadurch außermittig wird, aber ich habe dieses Support-Ticket gefunden, dialog('open')in dem eine Problemumgehung für das Platzieren der Anweisung in einem setTimeout bereitgestellt wird, um das Problem zu beheben.

Hier ist der Inhalt meines Headtags:

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

Ich habe die js und css für die Jquery-Benutzeroberfläche von http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip heruntergeladen . und der Körper:

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

Hatte das gleiche Problem und dank Ihrer Erwähnung, dass das eigentliche Problem mit CSS zusammenhängt, fand ich das Problem:

Wenn Sie position:relativestatt position:absolutein Ihrer .ui-dialogCSS-Regel haben, wird der Dialog und das width:'auto'Verhalten seltsam.

.ui-dialog { position: absolute;}

So habe ich es gemacht:

Responsive jQuery UI Dialog (und ein Fix für den maxWidth-Fehler)

Behebung der maxWidth & width: Auto-Fehler.

Ich stelle mir vor, float einzustellen: links für den Dialog wird funktionieren. Vermutlich wird der Dialog vom Plugin absolut positioniert. In diesem Fall wird seine Position dadurch bestimmt, aber der Nebeneffekt von float - Elemente werden nur so breit, wie sie zum Halten von Inhalten erforderlich sind - wird weiterhin wirksam.

Dies sollte funktionieren, wenn Sie nur eine Regel wie setzen

.myDialog {float:left}

in Ihrem Stylesheet, obwohl Sie es möglicherweise mit jQuery festlegen müssen

Ich hatte das gleiche Problem, als ich die jquery-Benutzeroberfläche auf 1.8.1 aktualisiert habe, ohne das entsprechende Thema zu aktualisieren. Nur wird benötigt, um das Thema auch zu aktualisieren und "Auto" funktioniert wieder.

Aus irgendeinem Grund hatte ich immer wieder dieses Problem mit der vollen Seitenbreite mit IE7, also habe ich diesen Hack gemacht:

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

Sie können das Problem der 100% -Breite vermeiden, indem Sie eine maximale Breite angeben. Die maxWidthOption scheint nicht zu funktionieren. max-widthLegen Sie stattdessen die CSS- Eigenschaft im Dialogfeld-Widget fest.

Wenn Sie auch die maximale Höhe einschränken möchten, verwenden Sie die maxHeightOption. Bei Bedarf wird eine Bildlaufleiste korrekt angezeigt.

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

Ich hatte ein ähnliches Problem.

Die Einstellung funktionierte für mich einwandfrei width, "auto"aber wenn der Dialog viel Text enthielt, erstreckte er sich über die gesamte Breite der Seite und ignorierte die maxWidthEinstellung.

Einstellen maxWidthauf createfunktioniert aber:

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

Ich hatte auch dieses Problem.

Damit habe ich es geschafft:

.ui-dialog{
    display:inline-block;
}

Alles was Sie tun müssen, ist nur hinzuzufügen:

width: '65%',

Ich habe das gleiche Problem und habe Position: Absolut in Ihrem .ui-Dialog {} CSS war nicht genug. Ich bemerkte diese Position: relative wurde auf den direkten Stil des tatsächlichen Elements gesetzt, so dass die CSS-Definition des .ui-Dialogs überschrieben wurde. Position einstellen: absolut auf dem div Ich wollte einen Dialog statisch machen, hat auch nicht funktioniert.

Am Ende habe ich zwei in meiner lokalen jQuery platzierte Elemente geändert, damit dies funktioniert.

Ich habe die folgende Zeile in jQuery wie folgt geändert:

elem.style.position = "absolute";

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

Da mein Dialog auf ziehbar eingestellt war, musste ich diese Zeile auch in jQuery-ui ändern, um Folgendes zu sein:

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

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

Vielleicht würde ich die Dinge, die ich habe, gründlicher durchgehen, aber ich dachte, ich würde mitteilen, wie ich das zum Laufen gebracht habe.

Wenn Sie es für IE7 benötigen, können Sie die Option undokumentiert, fehlerhaft und nicht unterstützt nicht verwenden {'width':'auto'} . Fügen Sie stattdessen Folgendes zu Ihrem hinzu .dialog():

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

Ob .scrollWidthdas Auffüllen auf der rechten Seite enthalten ist, hängt vom Browser ab (Firefox unterscheidet sich von Chrome). Sie können also entweder eine subjektive "ausreichend gute" Pixelanzahl hinzufügen .scrollWidthoder diese durch Ihre eigene Breitenberechnungsfunktion ersetzen.

Möglicherweise möchten Sie zu width: 0Ihren .dialog()Optionen hinzufügen, da diese Methode die Breite niemals verringert, sondern nur vergrößert.

Getestet für IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 und Opera 22.

Bearbeiten Sie diesen Balg:

$("#message").dialog({
	autoOpen:false,
	modal:true,
	resizable: false,
	width:'80%',