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.
{'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. "Hatte das gleiche Problem und dank Ihrer Erwähnung, dass das eigentliche Problem mit CSS zusammenhängt, fand ich das Problem:
Wenn Sie
position:relative
stattposition:absolute
in Ihrer.ui-dialog
CSS-Regel haben, wird der Dialog und daswidth:'auto'
Verhalten seltsam.quelle
So habe ich es gemacht:
Responsive jQuery UI Dialog (und ein Fix für den maxWidth-Fehler)
Behebung der maxWidth & width: Auto-Fehler.
quelle
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
in Ihrem Stylesheet, obwohl Sie es möglicherweise mit jQuery festlegen müssen
quelle
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.
quelle
Aus irgendeinem Grund hatte ich immer wieder dieses Problem mit der vollen Seitenbreite mit IE7, also habe ich diesen Hack gemacht:
quelle
Sie können das Problem der 100% -Breite vermeiden, indem Sie eine maximale Breite angeben. Die
maxWidth
Option scheint nicht zu funktionieren.max-width
Legen Sie stattdessen die CSS- Eigenschaft im Dialogfeld-Widget fest.Wenn Sie auch die maximale Höhe einschränken möchten, verwenden Sie die
maxHeight
Option. Bei Bedarf wird eine Bildlaufleiste korrekt angezeigt.quelle
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 diemaxWidth
Einstellung.Einstellen
maxWidth
aufcreate
funktioniert aber:quelle
Ich hatte auch dieses Problem.
Damit habe ich es geschafft:
quelle
Alles was Sie tun müssen, ist nur hinzuzufügen:
quelle
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:
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:
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.
quelle
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()
:Ob
.scrollWidth
das 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.scrollWidth
oder diese durch Ihre eigene Breitenberechnungsfunktion ersetzen.Möglicherweise möchten Sie zu
width: 0
Ihren.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.
quelle
Bearbeiten Sie diesen Balg:
quelle