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

Я использую диалоговое окно 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 ответа

Решение

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

Решение А

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

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

Решение Б

Модифицируйте 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()}),
Источник

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

Источник

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

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

Размещение URL-адреса на демо-версию проблемы поможет.

Источник
Другие вопросы по тегам