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

134

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.

womp
quelle

Antworten:

250

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>
Fermin
quelle
Fermin - danke für dein Beispiel und deinen Beitrag. Es stellte sich heraus, dass es wirklich ein Problem mit dem CSS war, obwohl es immer noch nicht klar ist, was das genaue Problem war (es war aus Firebug sowieso nicht offensichtlich). Wenn Sie alle meine Dialog-Divs auf die oberste Ebene verschieben und das Standard-CSS 1.8.1 (anstelle unserer Themenversion) verwenden, funktioniert dies hervorragend. Ich werde unsere Themenversion schrittweise wieder verschieben, wenn die Version 1.8.1 veröffentlicht wird, und die Wurzel des Problems finden. Vielen Dank!
Womp
Kein Problem, ich bin froh, dass ich helfen konnte. Ich war schon einmal dort, es geht darum, jeweils 1 CSS-Anweisung zu verschieben ... viel Spaß!
Fermin
2
IE7 scheint jedoch kaputt zu sein
Alex
2
Wenn Sie den Inhalt mit AJAX laden, bietet setTimeout () möglicherweise keine zuverlässige Lösung (z. B. wenn der Server langsam war und das Laden länger als 100 ms dauerte). Eine bessere Lösung wäre, die Rückruffunktion der .ajax () -Methode zu verwenden, um das Öffnen auszulösen. Auf diese Weise wird es erst geöffnet, wenn das Laden der Seite abgeschlossen ist.
NJBair
1
{'width':'auto'}funktioniert nicht in IE7 und wird nicht behoben, da die {'width':'auto'}Option von jQuery-UI gemäß scott.gonzalez nicht unterstützt wird : "Dialoge unterstützen keine automatische Breite. In den Dokumenten wird angegeben, dass die Option nur eine Nummer akzeptiert, die verwendet wird Eine Pixelgröße finden Sie im Thread jquery-ui-dev, in dem erläutert wird, warum die automatische Breite nicht unterstützt wird. "
Vladimir Kornea
11

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;}
Fortes
quelle
2

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

whereesrhys
quelle
2

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.

Jesús Alonso
quelle
2

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,
    ...
Alex
quelle
2

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>

Salman A.
quelle
1

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");
  }
});
tsi
quelle
1

Ich hatte auch dieses Problem.

Damit habe ich es geschafft:

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

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

width: '65%',
taggartJ
quelle
Basierend auf der Frage von OP würde dies nicht für alle seine Dialogfelder funktionieren, und er müsste immer noch jedes Dialogfeld einzeln festlegen.
Roelofs
0

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.

Scott
quelle
0

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.

Vladimir Kornea
quelle
-1

Bearbeiten Sie diesen Balg:

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

Carl 256
quelle
3
Bitte fügen Sie Ihrem Code eine Erklärung hinzu - warum sollte man Ihre Antwort bearbeiten?
Nico Haase