¿Estás intentando cambiar el tamaño de un cuadro de diálogo jQuery en IE6?

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

Pregunta

Pensé que había visto un informe de error sobre esto en el sitio jQuery, pero ahora no puedo encontrarlo.Estoy intentando cambiar el tamaño de un cuadro de diálogo en IE6.Pero cuando se cambia el tamaño del elemento, el contenido y la barra de título no se reducen.Sin embargo, cambiarán de tamaño si el diálogo se hace más grande.El resultado es que el botón de cerrar termina cortado y el contenido se recorta si el usuario cambia el tamaño del cuadro de diálogo para que sea más pequeño.

Intenté manejar el evento resizeStop y cambiar manualmente el tamaño del contenido y la barra de título, pero esto puede darme resultados extraños.Los tamaños y posiciones de los elementos en el área de contenido todavía estaban fuera de lugar.Además, aunque cambio el tamaño de la barra de título, el botón de cerrar todavía no vuelve a aparecer.¿Algunas ideas?Si esto es un error en jQuery-ui, ¿alguien conoce una buena solución?

<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>
¿Fue útil?

Solución

Pude encontrar una solución.Si agregas el estilo Desbordamiento:oculto al elemento div del contenedor de diálogo (que tiene la clase css .ui-dialog-container aplicada), luego todo cambia de tamaño correctamente.Todo lo que hice fue agregar una regla CSS de la siguiente manera al tema de flora:

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

También se podría corregir ejecutando lo siguiente:

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

Esto corrigió el problema que estaba viendo en IE6 y no introdujo ningún problema en Firefox.

Otros consejos

El CSS puede ser un factor.¿Podrías cambiar tu ejemplo para que podamos ver tu hoja de estilo?Actualicé el ejemplo para que no dependa de tener 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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top