iFrame в диалоге jQuery UI вызывает горизонтальную полосу прокрутки на родительском - PullRequest
Новая
       12

iFrame в диалоге jQuery UI вызывает горизонтальную полосу прокрутки на родительском

1 голос
/ 06 декабря 2009

Я использую диалоговое окно jQuery UI для представления контента в новом iFrame. Все работает отлично, за исключением того, что родительское окно диалога получает горизонтальную полосу прокрутки во время отображения диалога (IE8). Я отследил проблему до элемента в iFrame, который браузер интерпретировал как очень широкий, хотя единственный контент на странице в iFrame в 580px div.

Я пытался добавить CSS в теги HTML и BODY в iFrame (например, width: 98% или width: 600px;) ... ни один из них не оказывает никакого влияния.

Код для открытия диалогового окна приведен ниже. Есть предложения? 

$("a[providerId]").click(function(e) {
                e.preventDefault();
                var $this = $(this);
                var $width = 600;
                var $height = 400;
                $('<iframe id="companyDetail" class="companyDetail" style="padding: 0px;" src="' + this.href + '" />').dialog({
                    title: $this.attr('title'),
                    autoOpen: true,
                    width: $width,
                    height: $height,
                    modal: true,
                    resizable: false,
                    autoResize: true,
                    overlay: {
                        opacity: 0.5,
                        background: "black"
                    }
                }).width($width).height($height);
            });

ОБНОВЛЕНИЕ : посмотрите эти демонстрации, где я получил код, чтобы увидеть, о чем я говорю (в IE8): http://elijahmanor.com/demos/jqueryuidialogiframe/index.html

Ответы [ 4 ]

6 голосов
/ 12 декабря 2009

Это небольшая ошибка в jQuery UI 1.7.2, и в настоящее время открытый тикет (# 3623) по этому вопросу. В комментариях к предложению предлагаются два решения:

Раствор А

Изменить jquery-ui-1.7.2.custom.css :

  1. Найти .ui-widget-overlay.
  2. Добавить следующее правило: position:fixed;.

Раствор B

Изменить jquery-ui-1.7.2.custom.min.js :

  1. Найти addClass("ui-widget-overlay").css({width:this.width(),height:this.height()}); в строке 97.
  2. Удалить .css({width:this.width(),height:this.height()}).
1 голос
/ 13 декабря 2009

Моей первой мыслью было overflow-x : hidden, и в моем случае в IE8 в стандартном режиме, а также в режиме причуда он добился цели, горизонтальная черта исчезла. Все, что вам нужно, это поместить его в тег body.

0 голосов
/ 17 марта 2015

У меня была такая же проблема. В моем случае диалог является дочерним элементом тела, и я использовал следующий скрипт для предотвращения переполнения: 

$("#your-dialog").dialog({
  //our options,
  open: function(){
    $("body").css("overflow", "hidden");
  },
  close: function(){
    $("body").css("overflow", "initial");
  }
});
0 голосов
/ 06 декабря 2009
  • Если это происходит только при отображении модального пользовательского интерфейса, проверьте css, управляющий div, отвечающим за наложение.
  • Проверьте также ваш doctype.
  • Вы пробовали играть с overflow:hidden?

Поможет размещение URL-адреса для демонстрации проблемы в Интернете.

...