Der Versuch, ein jQuery-Dialog in IE6, um die Größe?

StackOverflow https://stackoverflow.com/questions/118280

Frage

Ich dachte, ich einen Fehlerbericht dazu auf der jQuery-Website gesehen hatte, aber jetzt kann ich es nicht finden. Ich versuche, einen Dialog in IE6 zu ändern. Aber wenn das Element der Größe verändert wird, der Inhalt und die Titelleiste kann die Größe nicht nach unten. Sie werden die Größe, wenn der Dialog größer gemacht wird, jedoch. Das Ergebnis ist, dass die Schließtaste endet abgeschnitten, und der Inhalt abgeschnitten wird, wenn der Benutzer den Dialog die Größe kleiner ist.

Ich habe versucht, die resizeStop Event-Handling und manuell den Inhalt und das titlebar Ändern der Größe, aber das kann mir seltsame Ergebnisse. Die Größen und Positionen der Elemente im Inhaltsbereich waren aus noch. Auch, obwohl ich die Titelleiste Größe ändern, noch die Schaltfläche zum Schließen nicht zurück in den Blick bewegen. Irgendwelche Ideen? Wenn dies ein Bug in jQuery-ui ist, weiß jemand eine gute Abhilfe? 

<html>
<head>
  <title>Example of IE6 resize issue</title>
  <link rel="stylesheet" type="text/css" href="http://ui.jquery.com/repository/latest/themes/flora/flora.all.css" />
  <script src="http://www.google.com/jsapi"></script>
  <script>        
    google.load("jquery", "1");        
    google.load("jqueryui", "1");        
    google.setOnLoadCallback(        
    function() {                
      $(document).ready(function()        
      {            
        $("#main-dialog").dialog();        
      });    
    });
    </script>
</head>
<body>
    <div id="main-dialog">    
      This is just some simple content that will fill the dialog. This example is    
      sufficient to reproduce the problem in IE6. It does not seem to occur in IE7    
      or FF. I haven't tried with Opera or Safari.
    </div>
</body> 
</html>
War es hilfreich?

Lösung

Ich konnte mit einer Lösung kommen. Wenn Sie den Stil Überlauf hinzu: versteckt in den Dialog div-Container-Element (die die CSS-Klasse .ui-Dialog-Container angewendet wurde), dann passt die Größe alles richtig. Ich tat alles, war eine CSS-Regel hinzufügen, um auf das Flora Thema folgt: 

.ui-dialog .ui-dialog-container {
  overflow: hidden;
}

Es könnte auch durch die Ausführung der folgenden korrigiert werden: 

if ($.browser.msie && $.browser.version == 6)
{
  $(".ui-dialog-container").css({ overflow: 'hidden' });
}

Das das Problem behoben ich unter IE6 sah und hat keine Probleme in FireFox eingeführt.

Andere Tipps

Die CSS kann ein Faktor sein. Könnten Sie Ihr Beispiel ändern, damit wir Ihr Sheet sehen kann? Ich habe das Beispiel aktualisiert, so dass es nicht jQuery abhängt lokal auf hat. 

<html>
<head>
<title>Example of IE6 resize issue</title>
<link rel="stylesheet" type="text/css" href="?.css" />
<script src="http://www.google.com/jsapi"></script>
<script>
    google.load("jquery", "1");
    google.load("jqueryui", "1");

    google.setOnLoadCallback(
    function() {
        $(document).ready(function()
        {
            $("#main-dialog").dialog();
        });
    });
</script>
</head>
<body>
<div id="main-dialog">
    This is just some simple content that will fill the dialog. This example is
    sufficient to reproduce the problem in IE6. It does not seem to occur in IE7
    or FF. I haven't tried with Opera or Safari.
</div>
</body> 
</html>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top