Vous essayez de redimensionner une boîte de dialogue jQuery dans IE6?

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

Question

Je pensais avoir déjà vu un rapport de bogue sur le site jQuery, mais je ne le trouve plus. J'essaie de redimensionner un dialogue dans IE6. Mais lorsque l'élément est redimensionné, le contenu et la barre de titre ne sont pas redimensionnés. Cependant, ils redimensionneront si le dialogue est agrandi. Le résultat est que le bouton de fermeture finit par être coupé et le contenu est coupé si l'utilisateur redimensionne la boîte de dialogue pour la réduire.

J'ai essayé de gérer l'événement resizeStop et de redimensionner manuellement le contenu et la barre de titre, mais cela peut donner des résultats étranges. La taille et la position des éléments dans la zone de contenu étaient toujours désactivées. De plus, même si je redimensionne la barre de titre, le bouton de fermeture ne revient pas à l'écran. Des idées? S'il s'agit d'un bogue dans jQuery-ui, est-ce que quelqu'un connaît une bonne solution de contournement? 

<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>
Était-ce utile?

La solution

J'ai pu trouver une solution. Si vous ajoutez le style overflow: hidden à l'élément div de la boîte de dialogue conteneur (à laquelle le conteneur .ui-dialog-dialog de la classe css lui est appliqué), tout est redimensionné correctement. Tout ce que j’ai fait, c’est d’ajouter une règle CSS comme suit au thème Flora: 

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

Vous pouvez également le corriger en exécutant les opérations suivantes: 

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

Ceci corrige le problème que je voyais sous IE6 et n'a pas introduit de problèmes dans FireFox.

Autres conseils

Le css peut être un facteur. Pourriez-vous changer votre exemple afin que nous puissions voir votre feuille de style? J'ai mis à jour l'exemple afin qu'il ne dépende pas d'avoir jQuery localement. 

<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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top