Tentando redimensionar uma caixa de diálogo jQuery no IE6?

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

Pergunta

Eu pensei que tinha visto um relatório de bug sobre isso no site do jQuery, mas agora não consigo encontrá-lo. Eu estou tentando redimensionar um diálogo no IE6. Mas quando o elemento é redimensionado, o conteúdo e título bar não redimensionar para baixo. Eles vão redimensionar-se se o diálogo é feito maior, no entanto. O resultado é que as extremidades fim do botão acima sendo cortado eo conteúdo é cortado se o usuário redimensionar o diálogo a ser menores.

Eu tentei Manipulação o evento resizeStop e redimensionar manualmente o conteúdo e barra de título, mas isso pode me deu resultados estranhos. Os tamanhos e as posições dos elementos na área de conteúdo ainda estavam fora. Além disso, embora eu redimensionar a barra de título, o botão para fechar ainda não se move para trás em vista. Alguma ideia? Se este é um bug no jQuery-ui, alguém sabe uma boa solução? 

<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>
Foi útil?

Solução

Eu era capaz de chegar a uma solução. Se você adicionar o estilo overflow: hidden para o elemento div recipiente de diálogo (que tem a classe css .ui-dialog-container aplicada a ele), então tudo redimensiona corretamente. Tudo o que fiz foi adicionar uma regra css da seguinte forma para o tema flora: 

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

Ele também poderia ser corrigido por executar o seguinte: 

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

Esta corrigiu o problema que eu estava vendo sob IE6 e não introduziu quaisquer problemas no FireFox.

Outras dicas

O css pode ser um fator. Você poderia mudar o seu exemplo para que possamos ver o seu estilo? Eu atualizei o exemplo para que ele não depende de ter 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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top