2008-09-22 26 views
1

Je pensais avoir vu un rapport de bug à ce sujet sur le site jQuery, mais maintenant je ne le trouve plus. J'essaye 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. Ils seront redimensionnés si le dialogue est plus grand, cependant. 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 être plus petit.Vous essayez de redimensionner une boîte de dialogue jQuery dans IE6?

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 bizarres. Les tailles et les positions des éléments dans la zone de contenu étaient toujours désactivées. En outre, même si je redimensionne la barre de titre, le bouton de fermeture ne s'affiche toujours pas. Des idées? Si c'est un bug dans jQuery-ui, est-ce que quelqu'un sait 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> 

Répondre

2

J'ai été capable de trouver une solution. Si vous ajoutez le style débordement: caché à l'élément div du conteneur de dialogue (auquel la classe css .ui-dialog-container est appliquée), tout est redimensionné correctement. Je ne ai fait ajouter une règle css comme suit au thème de la flore:

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

Il pourrait également être corrigée en exécutant la commande suivante:

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

Ce corrigé le problème que je voyais sous IE6 et a pas introduit de problèmes dans FireFox.

+0

Est-ce un problème général hasLayout? Pourrait ajouter une position: relative ou zoom: 1 faire la même chose? –

+0

J'ai essayé les deux position: relative et zoom: 1, ni corrigé le problème comme le débordement: caché a fait. –

0

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>