wake-up-neo.com

Passen Sie das Dialogfeld der jQuery-Benutzeroberfläche 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 Divs zugeordnet sind, die mit .ajax () -Aufrufen geladen werden. Sie verwenden alle den gleichen Setup-Aufruf:

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

Ich möchte nur, dass das Dialogfeld auf die Breite des Inhalts angepasst wird, der geladen wird. Im Moment bleibt die Breite nur bei 300px (der Standard) und ich bekomme 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 ist .dialog("option", "width", "500") nicht wirklich eine Option, da jeder Dialog eine andere Breite haben wird.

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

Welche Möglichkeiten habe ich? Ich verwende jQuery 1.4.1 mit jQuery UI 1.8rc1. Es scheint, als sollte dies etwas sein, das wirklich einfach ist.

EDIT: Ich habe eine umständliche Problemumgehung implementiert, suche aber immer noch nach einer besseren Lösung.

133
womp

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

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

Ich weiß, dass Sie sagten, dass dies 100% der Breite des Browserfensters einnimmt, aber es funktioniert gut hier, getestet in FF3.6, Chrome und IE8).

Ich rufe nicht AJAX auf, sondern ändere nur den HTML-Code des Dialogs manuell, glaube aber nicht, dass dies zu Problemen führt. Könnte eine andere CSS-Einstellung dies verhindern?

Das einzige Problem dabei ist, dass die Breite nicht in der Mitte liegt, aber ich habe festgestellt, dass dies Support-Ticket eine Problemumgehung für das Platzieren der Anweisung dialog('open') in einem setTimeout ist, um das Problem zu beheben .

Hier ist der Inhalt meines Head-Tags:

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

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

position:relative statt position:absolute in Ihrem .ui-dialog CSS-Regel macht den Dialog und width:'auto' verhalten sich seltsam.

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

So habe ich es gemacht:

Responsive jQuery UI Dialog (und eine Fehlerbehebung für maxWidth)

Behebung der maxWidth & width: Auto Bug.

3
Jason

Aus irgendeinem Grund hatte ich dieses Problem mit der vollen Seitenbreite mit dem 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,
    ...
2
Alex

Sie können das Problem mit 100% Breite vermeiden, indem Sie eine maximale Breite angeben. Die Option maxWidth scheint nicht zu funktionieren. Stellen Sie stattdessen die CSS-Eigenschaft max-width im Dialog-Widget ein.

Wenn Sie auch die maximale Höhe einschränken möchten, verwenden Sie die Option maxHeight . 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>
2
Salman A

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 - das Erstellen von Elementen, die nur so breit sind, wie sie zum Speichern 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 mithilfe von jQuery festlegen müssen

2
wheresrhys

Ich hatte das gleiche Problem, als ich jquery UI auf 1.8.1 aktualisiert habe, ohne das entsprechende Thema zu aktualisieren. Nur wird benötigt, um das Theme zu aktualisieren und "auto" funktioniert wieder.

2
Jesús Alonso

Ich hatte ein ähnliches Problem.

Das Setzen von width auf "auto" Hat für mich gut funktioniert, aber als das Dialogfeld viel Text enthielt, erstreckte es sich über die gesamte Breite der Seite, wobei die Einstellung maxWidth ignoriert wurde.

Das Setzen von maxWidth auf create funktioniert jedoch einwandfrei:

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

Ich hatte auch dieses Problem.

Damit habe ich es geschafft:

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

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

width: '65%',
0
Taggart Jensen

Ich habe das gleiche Problem und die Position: Absolut in Ihrem .ui-Dialog {} CSS war nicht genug. Mir ist aufgefallen, dass die Position: relative auf den direkten Stil des Elements gesetzt wurde, sodass die .ui-dialog-CSS-Definition überschrieben wurde. Einstellungsposition: Absolut auf dem div Ich wollte einen Dialog statisch machen, auch hat nicht funktioniert.

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

Ich habe die folgende Zeile in jQuery geändert:

elem.style.position = "absolute";

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

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

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

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

Vielleicht würde ich den Stil, den ich habe, gründlicher durchgehen, um die Dinge zu reparieren, aber ich dachte, ich würde teilen, wie ich das zum Funktionieren gebracht habe.

0
Scott

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

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

Ob .scrollWidth Die Auffüllung auf der rechten Seite enthält, hängt vom Browser ab (Firefox unterscheidet sich von Chrome). Sie können also .scrollWidth Entweder eine subjektive "ausreichend" Pixelanzahl hinzufügen oder durch eine ersetzen Ihre eigene Breitenberechnungsfunktion.

Möglicherweise möchten Sie width: 0 In Ihre .dialog() -Optionen aufnehmen, 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.

0
Vladimir Kornea