Opening a Modal Dialog shows a horizontal scroll bar

[teaspoon000]

Whenever I open a dialog box, there appears a horizontal scroll bar when it should not because the current page doesn't provide one.

See Forum: ​http://forum.jquery.com/topic/opening-a-modal-dialog-shows-a-horizontal-scroll-bar

[Scott González]

Can you please provide some more information. Perhaps a test page?

[skorpan]

I have this problem as well, but it seems that it is caused by the new way the dialog overlays work. This is what I use to "fix" this:

.ui-widget-overlay {
    background: black;
    filter: alpha(opacity=70);
    opacity: .7;
    position: fixed; /* <---------- */
    top: 0;          /* <---------- */
    left: 0;         /* <---------- */
}

[BobbyStealz]

I had this problem aswell, I just binded the open Event of the dialog to the following code:

open: function(event, ui){
   /*
    * Scrollbar fix 
    */
   $('body').css('overflow','hidden');
}

[2Toad]

My solution:

.ui-widget-overlay {
   position: fixed;  /* <---------- */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Version: 1.7.1
Browsers: FF3, IE7, IE8

[cozydozy]

My fix is:

1. Edit jquery-ui-1.7.2.custom.min.js
2. Find: addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});
3. Delete: .css({width:this.width(),height:this.height()})
4. It should become like this: addClass("ui-widget-overlay");
5. Save your file.
6. Edit jquery-ui-1.7.2.custom.css
7. Find: .ui-width-overlay
8. Make sure you have both width and height set to 100%.
9. You're done.

[cozydozy]

Something went wrong in my previous post.

My fix is:

1. Edit jquery-ui-1.7.2.custom.min.js
   
2. Find: addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});[[BR]]
3. Delete: .css({width:this.width(),height:this.height()})[[BR]]
4. It should become like this: addClass("ui-widget-overlay");
   
5. Save your file.
   
6. Edit jquery-ui-1.7.2.custom.css
   
7. Find: .ui-width-overlay
   
8. Make sure you have both width and height set to 100%.
   
9. You're done.

[cozydozy]

Bah, this text form is crap.
Something went wrong in my previous post.

My fix is:

1. Edit jquery-ui-1.7.2.custom.min.js
   
2. Find: addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});
   
3. Delete: .css({width:this.width(),height:this.height()})
   
4. It should become like this: addClass("ui-widget-overlay");
   
5. Save your file.
   
6. Edit jquery-ui-1.7.2.custom.css
   
7. Find: .ui-width-overlay
   
8. Make sure you have both width and height set to 100%.
   
9. You're done.

[dennydaugherty]

The aforementioned fix by cozydozy seems to work fine in IE7, IE8, FF3.5, Chrome, Safari and Opera. However, I wanted to maintain compatibility with IE6, and the old way does work in IE6. For myself I implemented a hack to detect IE6, and I now get the same behavior across all browsers without scrollbars occurring in IE8

--- ui.dialog.js
+++ ui.dialog.js
@@ -563,11 +563,22 @@
                        $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
                }

-               var $el = $('<div></div>').appendTo(document.body)
+    /* This is a hack to maintain backward compatibility with IE while fixing
+     * the scrollbar issue in IE8. See http://dev.jqueryui.com/ticket/3623
+     */
+    var $el;
+    if (navigator.userAgent.match(/MSIE 6.0/)) {
+      $el = $('<div></div>').appendTo(document.body)
                        .addClass('ui-widget-overlay').css({
                                width: this.width(),
                                height: this.height()
                        });
+    }
+    else {
+      $el = $('<div></div>').appendTo(document.body)
+        .addClass('ui-widget-overlay');
+    }
+

                (dialog.options.bgiframe && $.fn.bgiframe && $el.bgiframe());

[suner]

For whatever it is worth, the issue seems to come from the fact that in IE8, the width of the overlay is calculated as the visible part of the screen + the vertical scrollbar, whereas other browsers only count it as the visible part.

[Rwhitbeck]

As Suner mentions I can only recreate this bug in IE with this test page ​http://jsbin.com/anuso

[stevee@…]

Replying to scott.gonzalez:

Can you please provide some more information. Perhaps a test page?

This page exhibits the described bug in IE8

​http://jqueryui.com/demos/dialog/#modal-confirmation

:) There, simples.

[moxen]

The changing of the position CSS property for class .ui-widget-overlay from absolute to fixed corrected the scroll bar issue for us but caused a memory bleed and hanging in IE 6. I found a work around for this by doing the following in a CSS file:

.ui-widget-overlay { position: fixed; } .ui-widget-overlay { _position: absolute; }

The first entry is used to correct the scroll bar issue in IE 8 and works fab, the second entry with the "_" is picked up in IE 6 only and sets the position back to absolute as we never had a scroll bar issue in IE 6.

[Scott González]

Fixed in ​b548d34.

[Scott González]

Reverted the commit.

[Scott González]

Dialog: Don't set specific dimensions on the overlay - let it expand based on 100% dimensions. Fixes #3623 - Opening a Modal Dialog shows a horizontal scroll bar.

Changeset: b548d34e14421176be49d218f40feb18c5bc8f49

[Scott González]

Revert "Dialog: Don't set specific dimensions on the overlay - let it expand based on 100% dimensions. Fixes #3623 - Opening a Modal Dialog shows a horizontal scroll bar."

This reverts commit b548d34e14421176be49d218f40feb18c5bc8f49.

Changeset: 70c4857cc5dbbdbdcd095ca62b39be25020e3066

[RR1000]

My fix is:

1.Edit jquery-ui-1.8.9.custom.min.js

2.Find: addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});

3.Delete: .css({width:this.width(),height:this.height()})

4.It should become like this: addClass("ui-widget-overlay");

5.Save your file.

6.Edit jquery-ui-1.8.9.custom.css

7.Find: .ui-width-overlay

8.Make sure you have both width and width set to 100%.

9.You're done.

[myr]

I experience this problem using opera 11.01 and jqueryui 1.8.10

.ui-widget-overlay {
   position: fixed;

This method does not work because the overlay does not completely disappear when the dialog is closed.

open: function(event, ui){
   /*
    * Scrollbar fix 
    */
   $('body').css('overflow','hidden');
}

This method is a completely ridiculous way of solving the problem and I did not even try it to see if it works.

Delete: .css({width:this.width(),height:this.height()})

This method causes some naughty behavior when opening a dialog with the page scrolled down and/or scrolling the page.

Creating browser-specific fixes is also something I would like to avoid.

My solution? Remove only width:this.width(), and all problems are solved!

Tested on Opera, Firefox, and Chrome. Demo is ​available here. Let me know if you notice any problems.

[Scott González]

#7217 is a duplicate of this ticket.

[Jörn Zaefferer]

Dialog: Changed IE6 overlay width adjustment to apply to all IE versions. Fixed #3623 - Opening a Modal Dialog shows a horizontal scroll bar (cherry picked from commit 29b36bb4090632aaf306cc44591386c0263c9d27)

Changeset: fab17293e455f31435bf731007ee2badfed1fc31

[steptom]

Since I upgrade my website to the 1.8.14 version, I have already a problem with the scroll bars.

I have this problem with IE8 when I display a Modal Dialog on a page where there is no vertical scroll bar. When the Modal Dialog is displayed, the vertical scroll bar appears (and in some cases, depending on the size of the window, the horizontal scroll bar too).

I try with the demo page of myr (​http://linuxdeal.com/add-printer.php), and the problem appears. (I you reduce the width of the window to the "minimum", you will see the horizontal scroll bar appears)

Should we not reopen this bug to correct it ?

[Scott González]

Replying to steptom:

Should we not reopen this bug to correct it ?

No. You're using 1.8.14 and linuxdeal is using 1.8.10. This bug is only fixed in git, as noted by the milestone of 1.9.

[steptom]

Sorry I have not noticed the version of linuxdeal, but at home I've tried with the version 1.8.14 and the result is the same only when there is no scroll bar before displaying a modal dialog. Am I the only one with this behavior ?

[Scott González]

I'll repeat this again. This is not fixed in any released version. This is only fixed in git and will not be released until 1.9.

[steptom]

Sorry for my lack of understanding. The changelog of the version 1.8.14 misled me. It is noted indeed that this bug is corrected in this version ​http://jqueryui.com/docs/Changelog/1.8.14

[rdworth]

Sorry for the confusion. I corrected the changelog.

[Scott González]

I checked the commit log to see how this got into the changelog. This was in fact merged into 1-8-stable ( ​commit, ​ticket comment ). I'm updating the milestone to reflect this. @steptom, can you please provide a reduced test case showing the problem so that we can verify and re-open this ticket? Sorry for all the confusion.

[steptom]

My test case is very simple. You have juste to create a simple page with a button which allows you to open a modal dialog.

The code of the page is the following (Sorry but jsFiddle ou jsbin display the result in iFrame and, so you cannot see the real result. So, you much create a "test.html" file on your disk, paste the following code and execute it on IE8 - The window must have big dimensions in order to display no scroll bars. After displaying the modal dialog, the scroll bars are displayed) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Test bug #3623</title>
	<meta name="description" content="Test bug #3623" />
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/i18n/jquery-ui-i18n.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("button#OpenModalDialog").click(function(event)
			{
				event.preventDefault();
				
				var dialog = $('<div><p>Hello !!!</p></div>')
				.dialog({
					title: "Modal Dialog",
					modal: true,
					autoOpen: false,
					width: 400,
					resizable: false,
					buttons: {
						"Close" : function() {
							$(this).dialog("close");
						}
					}
				})
				.dialog('open');
			});
		});
	</script>
</head>
<body>
	Test bug #3623
	<br />
	<button id="OpenModalDialog" type="button">Click here</button>
</body>
</html>

Additionnal information : I have tested this source code on 2 different computers which have IE8 and the problem is the same on both.

[steptom]

Can anyone confirm that my test case is correct in order to re-open the bug ?

[steptom]

I'm very surprised that nobody answers me ? Must I create an other ticket ?

[rdworth]

Replying to steptom:

Can anyone confirm that my test case is correct in order to re-open the bug ?

I was not able to reproduce this issue using your latest provided test case in a test.html file (not jsfiddle or jsbin) and IE8. I did however in the course of reducing your test case and attempting to reproduce it, find a different issue (not limited to IE8, does show in jsbin): ​http://bugs.jqueryui.com/ticket/7562

[steptom]

I am very surprised to be the only one to get to reproduce the bug (on 2 different computers). For proof, I have made print screens :

1 - Before opening the modal dialog : ​http://imageshack.us/photo/my-images/836/beforeopenmodaldialog.png/

2 - After opening the modal dialog : ​http://imageshack.us/photo/my-images/839/openedmodaldialog.png/

3 - After opening the modal dialog a second time : ​http://imageshack.us/photo/my-images/801/openedmodaldialog2.png/

We can notice that the scroll bars have not the same positions after opening the modal dialog a second time. Maybe, this detail may help in resolving the bug.

@rdworth : As you can see, I reproduce the bug without resizing the browser window.

[Scott González]

@steptom: I can confirm the bug still exists in 1.8.14 with your test page. Pointing your page at ​http://code.jquery.com/ui/jquery-ui-git.js and ​http://code.jquery.com/ui/jquery-ui-git.css shows that the problem is fixed in master. I'm not sure how the bug didn't get fixed in 1.8.14 with the merge, but I'm going to close as fixed for 1.9. Can you please confirm that your test page does not show a problem using master?

[rdworth]

@scott.gonzalez : Perhaps because #5637 was not merged?

[Scott González]

nope, this is a problem on the first use and that was specifically for reuse.

[steptom]

Thanks for your answer scott.gonzalez.

I confirm that there is no bug in my test case using the "​http://code.jquery.com/ui/jquery-ui-git.js" script. (The CSS file seems to be not necessary)

Now I have to wait for the release of version 1.9 (stable) :-(

[Scott González]

If you track down what's missing in 1-8-stable, we'll gladly land the fix in a 1.8.x release.

[thedoc]

Have the same problem here, scroll bar/bars with ie8 like rdworth. using v. 1.8.14. Would be really thankfull if you can fix this in the stable version. Thank you for the great job.

[MSwaff]

To fix this bug for v. 1.8.11+, open the Dialog js file (jquery.ui.dialog.js) and scroll down to the height property of the overlay. Look for this line:

if ($.browser.msie && $.browser.version < 7) {

and change it to

if ($.browser.msie) {

Do the same for the width property and you will fix the scroll bar bug for all versions of IE.