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

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

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

Ниже приведен код открытия диалога. Какие-либо предложения?

$("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.


iframe jquery jquery-ui jquery-ui-dialog
person mkedobbs    schedule 06.12.2009    source источник
comment
Я не могу опубликовать демонстрацию из-за действующего соглашения о неразглашении. Если есть дополнительная информация/код, который был бы полезен, дайте мне знать, и я опубликую столько, сколько смогу.   -  person mkedobbs    schedule 06.12.2009
comment
может принтскрин? просто чтобы убедиться, что я правильно понимаю?   -  person pixeline    schedule 06.12.2009

Ответы (4)


arrow_upward
6
arrow_downward

Похоже, это небольшая ошибка в пользовательском интерфейсе jQuery 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()}).
person Rikki    schedule 12.12.2009
comment
Это не сработало. Однако билет, на который вы ссылались, указал мне правильное направление. Я изменил положение класса ui-widget-overlay файла CSS на фиксированное. Поскольку вы указали мне правильное направление, я дам вам принятый ответ, если вы измените его, чтобы отразить то, что на самом деле устранило проблему. - person mkedobbs; 12.12.2009
comment
Хорошо, я сделаю это. Я попробовал решение position:fixed, и оно у меня не сработало, но то, что я опубликовал, сработало, я просто включу оба решения. - person Rikki; 12.12.2009
comment
классно. это сработало для меня в диалоговом окне JQuery. Но вместо того, чтобы изменять jQuery CSS, я бы также предпочел написать перезаписанную версию в моем собственном файле CSS, например - .ui-widget-overlay { position: fixed!important; }. Это мелочь, но ваш ответ сэкономил мне гораздо больше усилий. Благодарность - person Nirman; 30.07.2013

arrow_upward
1
arrow_downward

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

person spirytus    schedule 13.12.2009

arrow_upward
0
arrow_downward

  • Если это происходит только при отображении модального пользовательского интерфейса, проверьте css, контролирующий div, отвечающий за наложение.
  • Проверьте также ваш тип документа.
  • Вы пробовали играть с overflow:hidden ?

Публикация URL-адреса онлайн-демонстрации проблемы может помочь.

person pixeline    schedule 06.12.2009
comment
‹!DOCTYPE html PUBLIC --//W3C//DTD XHTML 1.0 Strict//EN w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd› Я поигрался с каждой перестановкой overflow: hidden (overflow-x и т. д.)... CSS практически дословно из 960 .gs (в основном все обнуляется в reset.css). - person mkedobbs; 06.12.2009
comment
Вы пытались установить ширину iframe, скажем, 400 пикселей? - person pixeline; 06.12.2009
comment
я пробовал это, как явно в теге, так и с .width($width), который находится в приведенном выше коде. - person mkedobbs; 07.12.2009
comment
если вы загружаете эту html-страницу отдельно (не в iframe), она отображается нормально? - person pixeline; 07.12.2009
comment
Да. И я начинаю думать, что это непонятная ошибка IE8. Я искал вокруг, чтобы попытаться найти другие сайты, использующие эту технику, и у каждого была точно такая же проблема. FF, Chrome и Safari — все в порядке. - person mkedobbs; 07.12.2009
comment
Попробуйте добавить это в тег заголовка: ‹meta http-equiv=X-UA-Compatible content=IE=EmulateIE7› - person pixeline; 07.12.2009
comment
также попробуйте поиграть с html-тегом загруженной html-страницы: html{ float: left; отображение: наследовать !важно; } - person pixeline; 07.12.2009
comment
Я не хочу эмулировать IE7 на всем сайте (поскольку повсюду используются подобные диалоги). Я дам вам знать, если последнее предложение сработает. - person mkedobbs; 08.12.2009
comment
Не повезло. Я подумываю добавить награду к этому вопросу, потому что это сводит меня с ума... - person mkedobbs; 09.12.2009
comment
было бы очень полезно, если бы вы создали демонстрацию проблемы. - person pixeline; 09.12.2009
comment
См. ссылку, которую я добавил к исходному сообщению, для примеров проблемы. - person mkedobbs; 10.12.2009

arrow_upward
0
arrow_downward

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

$("#your-dialog").dialog({
  //our options,
  open: function(){
    $("body").css("overflow", "hidden");
  },
  close: function(){
    $("body").css("overflow", "initial");
  }
});
person Genmais    schedule 17.03.2015