Geek Answers Handbook

IFrame in jQuery UI Dialog calls horizontal scrollbar on parent

I am using the jQuery UI dialog to present content in a new iFrame. Everything works fine, except that the parent dialog box gets a horizontal scrollbar when the dialog is displayed (IE8). I tracked the problem until the <html> element inside the iFrame is interpreted as very wide by the browser, although the only content on the page is in the iFrame in the 580px div.

I tried adding CSS to the HTML and BODY tags in the iFrame (e.g. width: 98% or width: 600 pixels) ... none of this has any effect.

The following is the opening code for the dialog box. Any suggestions?

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

+1
4

, jQuery UI 1.7.2, (№ 3623). :

A

jquery-ui-1.7.2.custom.css:

  • .ui-widget-overlay.
  • : position:fixed;.

B

jquery-ui-1.7.2.custom.min.js:

  • addClass("ui-widget-overlay").css({width:this.width(),height:this.height()}); 97.
  • .css({width:this.width(),height:this.height()}).
+6

overflow-x : hidden, IE8 , quirks , . , , .

+1
  • ui, css, div, .
  • doctype.
  • overflow:hidden?

URL- - .

0

. , script, :

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

More articles:


All Articles