Пытаетесь изменить размер диалогового окна jQuery в IE6? - PullRequest
Новая
       25

Пытаетесь изменить размер диалогового окна jQuery в IE6?

1 голос
/ 23 сентября 2008

Мне показалось, что я видел сообщение об ошибке на этом сайте jQuery, но теперь не могу его найти. Я пытаюсь изменить размер диалога в IE6. Но когда размер элемента изменяется, содержимое и строка заголовка не уменьшаются. Тем не менее, они изменят размер, если диалог будет увеличен. В результате кнопка закрытия в конечном итоге обрезается, а содержимое обрезается, если пользователь изменяет размер диалогового окна, чтобы оно стало меньше.

Я пытался обработать событие resizeStop и вручную изменить размер содержимого и заголовка, но это может дать мне странные результаты. Размеры и положение элементов в области содержимого все еще были отключены. Кроме того, хотя я изменяю размер строки заголовка, кнопка закрытия по-прежнему не возвращается в поле зрения. Есть идеи? Если это ошибка в jQuery-ui, кто-нибудь знает хороший обходной путь? 

<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>

Ответы [ 2 ]

2 голосов
/ 25 сентября 2008

Мне удалось найти решение. Если вы добавите стиль overflow: hidden к элементу div диалогового контейнера (к которому применяется класс css .ui-dialog-container), то все будет изменено в размерах. Все, что я сделал, это добавил правило css следующим образом в тему флоры: 

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

Это также можно исправить, выполнив следующее: 

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

Это исправило проблему, с которой я столкнулся в IE6, и не вызвало проблем в FireFox.

0 голосов
/ 23 сентября 2008

CSS может быть фактором. Не могли бы вы изменить свой пример, чтобы мы могли видеть вашу таблицу стилей? Я обновил пример, чтобы он не зависел от локального наличия jQuery. 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...