Skip to main content

Search and Top Navigation

#3623 closed bug (fixed)

Opened November 25, 2008 12:25PM UTC

Closed July 19, 2011 04:21PM UTC

Last modified September 14, 2011 06:56PM UTC

Opening a Modal Dialog shows a horizontal scroll bar

Reported by: teaspoon000 Owned by:
Priority: major Milestone: 1.9.0
Component: ui.dialog Version: 1.7.2
Keywords: scroll bar in dialog box Cc:
Blocked by: Blocking:
Description

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

Attachments (1)
Change History (47)

Changed November 30, 2008 01:42PM UTC by jzaefferer comment:1

component: ui.coreui.dialog

Changed December 19, 2008 06:21PM UTC by scottgonzalez comment:2

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

Changed January 02, 2009 04:34AM UTC by scottgonzalez comment:3

milestone: TBD1.6
priority: minormajor

Changed February 19, 2009 02:44PM UTC by skorpan comment:4

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;         /* <---------- */
}

Changed March 03, 2009 03:59AM UTC by BobbyStealz comment:5

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');
}

Changed March 08, 2009 02:40PM UTC by rdworth comment:6

milestone: 1.71.8

Changed April 30, 2009 11:40AM UTC by 2Toad comment:7

My solution:

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

Version: 1.7.1

Browsers: FF3, IE7, IE8

Changed November 10, 2009 10:44AM UTC by cozydozy comment:8

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.

Changed November 10, 2009 10:51AM UTC by cozydozy comment:9

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.

Changed November 10, 2009 10:53AM UTC by cozydozy comment:10

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.

Changed December 31, 2009 02:41PM UTC by dennydaugherty comment:11

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());

Changed January 26, 2010 09:33AM UTC by suner comment:12

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.

Changed February 05, 2010 12:43AM UTC by Rwhitbeck comment:13

version: 1.5.21.7.2

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

Changed February 05, 2010 12:51AM UTC by Rwhitbeck comment:14

description: Whenever I open a dialog box, there appears a horizontal scroll bar when it should not because the current page doesn't provide one.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

Changed February 16, 2010 02:22PM UTC by stevee@gmail.com comment:15

Replying to [comment:2 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.

Changed March 01, 2010 05:36PM UTC by rdworth comment:16

priority: majorcritical

Changed April 20, 2010 12:28PM UTC by moxen comment:17

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.

Changed July 21, 2010 02:12AM UTC by scottgonzalez comment:18

resolution: → fixed
status: newclosed

Fixed in b548d34.

Changed July 21, 2010 12:02PM UTC by scottgonzalez comment:19

resolution: fixed
status: closedreopened

Reverted the commit.

Changed October 19, 2010 03:44PM UTC by scottgonzalez comment:20

priority: criticalmajor

Changed November 19, 2010 06:26PM UTC by Scott González comment:21

resolution: → fixed
status: reopenedclosed

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

Changed November 19, 2010 06:26PM UTC by Scott González comment:22

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

Changed November 19, 2010 06:49PM UTC by scottgonzalez comment:23

resolution: fixed
status: closedreopened

Changed February 01, 2011 12:14PM UTC by RR1000 comment:24

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.

Changed March 08, 2011 03:28AM UTC by myr comment:25

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.

Changed April 04, 2011 01:00PM UTC by scottgonzalez comment:26

#7217 is a duplicate of this ticket.

Changed May 18, 2011 03:12PM UTC by Jörn Zaefferer comment:27

resolution: → fixed
status: reopenedclosed

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

Changed June 30, 2011 11:03PM UTC by steptom comment:28

_comment0: I have already a problem with the scrollbar. \ Since I upgrade my website to the 1.8.14 version, there is no problem with the horizontal scroll bar but now with the vertical scroll bar. \ \ 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. \ \ I try with the demo page of myr ([http://linuxdeal.com/add-printer.php]), and the problem appears. \ \ Should we not reopen this bug to correct it ?1309475435026011

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 ?

Changed July 01, 2011 01:38AM UTC by scottgonzalez comment:29

Replying to [comment:28 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.

Changed July 01, 2011 09:44PM UTC by steptom comment:30

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 ?

Changed July 02, 2011 12:22AM UTC by scottgonzalez comment:31

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.

Changed July 02, 2011 01:00AM UTC by steptom comment:32

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

Changed July 02, 2011 12:56PM UTC by rdworth comment:33

Sorry for the confusion. I corrected the changelog.

Changed July 02, 2011 02:25PM UTC by scottgonzalez comment:34

milestone: 1.91.8.14

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.

Changed July 03, 2011 09:07PM UTC by steptom comment:35

_comment0: 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> \ }}} \ 1309792629484707

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.

Changed July 06, 2011 09:20PM UTC by steptom comment:36

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

Changed July 17, 2011 09:07PM UTC by steptom comment:37

I'm very surprised that nobody answers me ?

Must I create an other ticket ?

Changed July 18, 2011 01:36PM UTC by rdworth comment:38

_comment0: I was not able to reproduce this issue using your latest provided test case and IE8. I did however in the course of reducing your test case and attempting to reproduce it, find a different issue (that is not limited to IE): http://bugs.jqueryui.com/ticket/75621310996234746743
_comment1: Replying to [comment:36 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 and IE8. I did however in the course of reducing your test case and attempting to reproduce it, find a different issue (that is not limited to IE): http://bugs.jqueryui.com/ticket/75621310996315526775

Replying to [comment:36 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

Changed July 18, 2011 02:20PM UTC by steptom comment:39

_comment0: 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 open the modal dialog : [http://imageshack.us/photo/my-images/836/beforeopenmodaldialog.png/] \ \ 2 - After open the modal dialog : [http://imageshack.us/photo/my-images/839/openedmodaldialog.png/] \ \ 3 - After open 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.1310998884103911

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.

Changed July 19, 2011 04:21PM UTC by scottgonzalez comment:40

_comment0: @stepmom: 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?1311092596670489
milestone: 1.8.14
resolution: fixed
status: closedreopened

@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?

Changed July 19, 2011 04:21PM UTC by scottgonzalez comment:41

milestone: → 1.9
resolution: → fixed
status: reopenedclosed

Changed July 19, 2011 04:28PM UTC by rdworth comment:42

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

Changed July 19, 2011 04:37PM UTC by scottgonzalez comment:43

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

Changed July 19, 2011 09:22PM UTC by steptom comment:44

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) :-(

Changed July 19, 2011 09:27PM UTC by scottgonzalez comment:45

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

Changed July 20, 2011 08:20AM UTC by thedoc comment:46

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.

Changed September 14, 2011 06:56PM UTC by MSwaff comment:47

_comment0: 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.1316026651201583

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.