Cerchi di ridimensionare una finestra di dialogo jQuery in IE6?

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

Domanda

Pensavo di aver visto una segnalazione di bug al riguardo sul sito jQuery, ma ora non riesco a trovarlo. Sto cercando di ridimensionare una finestra di dialogo in IE6. Ma quando l'elemento viene ridimensionato, il contenuto e la barra del titolo non vengono ridimensionati. Si ridimensioneranno se la finestra di dialogo viene ingrandita, tuttavia. Il risultato è che il pulsante di chiusura viene tagliato e il contenuto viene troncato se l'utente ridimensiona la finestra di dialogo per ridurla.

Ho provato a gestire l'evento resizeStop e a ridimensionare manualmente il contenuto e la barra del titolo, ma questo può darmi risultati strani. Le dimensioni e le posizioni degli elementi nell'area del contenuto erano ancora disattivate. Inoltre, anche se ridimensiono la barra del titolo, il pulsante di chiusura non torna ancora in vista. Qualche idea? Se questo è un bug in jQuery-ui, qualcuno conosce una buona soluzione? 

<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>
È stato utile?

Soluzione

Sono stato in grado di trovare una soluzione. Se aggiungi lo stile overflow: nascosto all'elemento div del contenitore di dialogo (a cui è applicata la classe css .ui-dialog-container), tutto viene ridimensionato correttamente. Tutto quello che ho fatto è stato aggiungere una regola CSS come segue al tema Flora: 

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

Potrebbe anche essere corretto eseguendo quanto segue: 

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

Ciò ha corretto il problema che stavo riscontrando in IE6 e non ha introdotto alcun problema in FireFox.

Altri suggerimenti

Il CSS può essere un fattore. Potresti cambiare il tuo esempio in modo che possiamo vedere il tuo foglio di stile? Ho aggiornato l'esempio in modo che non dipenda dall'avere jQuery localmente. 

<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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top