JQuery UI Dialog autoResize funktioniert nicht in Chrome

Question

Ich habe ein Problem mit der Option autoResize des JQuery-Dialogs. Ich verwende den Dialog, um ein AJAX-Aufruf-Ergebnis zu zeigen, so kann ich nicht die endgültige Höhe des Dialogs vorhersagen. Ich möchte seine Höhe an die Größe des Inhalts anpassen. Ich las dort über die autoResize Option, scheint aber nicht richtig zu funktionieren.

Hier mein Code:

    $("#my_dialog").dialog({
        modal:true,
        autoResize: true,
        open:function(){
            $(this).parents(".ui-dialog:first").find(".ui-widget-header")
            .removeClass("ui-widget-header").addClass("ui-widget-header-ia");
        }
    });

aber wenn der AJAX-Inhalt geladen wird, ändert sich die Größe des Dialogs nicht, und stattdessen erscheint eine Bildlaufleiste.

Das Problem ist, dass das Testen desselben Codes, ohne die autoResize Option im IE6 funktioniert einwandfrei!!

Ich denke also, dass es vielleicht daran liegt, dass Google Chrome diese Option nicht unterstützt.

Können Sie mir bitte helfen? Vielen Dank für Ihre Zeit.

Answer 1

Ich hatte genau das gleiche Problem - bei einem Benutzer wurde das Dialogfeld immer als zu niedrig geöffnet und die Höhe wurde nicht aktualisiert, selbst wenn der Inhalt aktualisiert wurde. Ich konnte das Problem zunächst nicht reproduzieren, versuchte es mit verschiedenen Versionen, Betriebssystemen usw. Dann stolperte ich über dies:

http://hustoknow.blogspot.com/2010/10/chrome-and-jquery-ui-min-height-issue.html

Es scheint, dass die Zoomstufe das Problem verursacht, zumindest in meinem Fall. Wenn ich die Originalseite mit dem Standardzoom lade (drücken Sie Ctrl + 0 in Chrome), öffnet sich der Dialog ordnungsgemäß. Dann schloss ich den Dialog, drückte Ctrl + - (Chrome zoomt heraus), lud die Seite neu mit F5 , öffnete den Dialog erneut und das Problem trat jedes Mal auf. Ein erneutes Laden scheint zwingend erforderlich zu sein, wenn ich die Originalseite mit dem Standardzoom lud und dann herauszoomte, kannten die Dialoge ihre Höhe. Offenbar wird die im Link beschriebene Prüfung der Mindesthöhe beim Laden der Originalseite durchgeführt.

Ich habe noch keine andere Lösung gefunden, als nicht zu verkleinern, aber das könnte auch die Ursache für Ihr Problem sein.

Answer 2

Ich habe festgestellt, dass jQuery UI setzt explizit die Höhe des Elements beim Erstellen/Öffnen des Dialogs. Ein nützlicher Workaround ist daher, einfach das css-Höhenattribut des Elements zurückzusetzen nach Die Öffnung sieht so aus:

  element.dialog('open');
  element.css('height', '');

Answer 3

Wenn wir nicht wissen, wie viele Inhalte wir anzeigen werden, sollten wir besser die größenveränderbare Option für den jquery ui modla dialog. sie können auch die Autoresize-Plugin