Opened 9 years ago

Closed 7 years ago

Last modified 6 years ago

#3623 closed bug (fixed)

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 (last modified by Rwhitbeck)

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)

overlayscrollbar_demo.html (927 bytes) - added by Tukler 7 years ago.

Download all attachments as: .zip

Change History (48)

comment:1 Changed 9 years ago by Jörn Zaefferer

Component: ui.coreui.dialog

comment:2 Changed 9 years ago by Scott González

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

comment:3 Changed 9 years ago by Scott González

Milestone: TBD1.6
Priority: minormajor

comment:4 Changed 9 years ago by 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;         /* <---------- */
}

comment:5 Changed 9 years ago by 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');
}

comment:6 Changed 9 years ago by rdworth

Milestone: 1.71.8

comment:7 Changed 9 years ago by 2Toad

My solution:

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

Version: 1.7.1
Browsers: FF3, IE7, IE8

comment:8 Changed 8 years ago by 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.

comment:9 Changed 8 years ago by 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.

comment:10 Changed 8 years ago by 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.

comment:11 Changed 8 years ago by 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());

comment:13 in reply to:  12 Changed 8 years ago by 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.

comment:15 Changed 8 years ago by Rwhitbeck

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

comment:16 Changed 8 years ago by Rwhitbeck

Description: modified (diff)

comment:18 in reply to:  2 Changed 8 years ago by 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.

comment:19 Changed 8 years ago by rdworth

Priority: majorcritical

comment:20 Changed 8 years ago by 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.

comment:21 Changed 8 years ago by Scott González

Resolution: fixed
Status: newclosed

Fixed in b548d34.

comment:22 Changed 8 years ago by Scott González

Resolution: fixed
Status: closedreopened

Reverted the commit.

Changed 7 years ago by Tukler

Attachment: overlayscrollbar_demo.html added

comment:24 Changed 7 years ago by Scott González

Priority: criticalmajor

comment:22 Changed 7 years ago by Scott González

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

comment:23 Changed 7 years ago by 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

comment:24 Changed 7 years ago by Scott González

Resolution: fixed
Status: closedreopened

comment:25 Changed 7 years ago by 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.

comment:26 Changed 7 years ago by 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.

comment:27 Changed 7 years ago by Scott González

#7217 is a duplicate of this ticket.

comment:27 Changed 7 years ago by Jörn Zaefferer

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

comment:28 Changed 7 years ago by 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 ?

Last edited 7 years ago by steptom (previous) (diff)

comment:29 in reply to:  28 Changed 7 years ago by 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.

comment:30 Changed 7 years ago by 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 ?

comment:31 Changed 7 years ago by 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.

comment:32 Changed 7 years ago by 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

comment:33 Changed 7 years ago by rdworth

Sorry for the confusion. I corrected the changelog.

comment:34 Changed 7 years ago by Scott González

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.

comment:35 Changed 7 years ago by 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.

Last edited 7 years ago by steptom (previous) (diff)

comment:36 Changed 7 years ago by steptom

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

comment:37 Changed 7 years ago by steptom

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

comment:38 in reply to:  36 ; Changed 7 years ago by 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

Last edited 7 years ago by rdworth (previous) (diff)

comment:39 in reply to:  38 Changed 7 years ago by 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.

Last edited 7 years ago by steptom (previous) (diff)

comment:40 Changed 7 years ago by Scott González

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?

Last edited 7 years ago by Scott González (previous) (diff)

comment:41 Changed 7 years ago by Scott González

Milestone: 1.9
Resolution: fixed
Status: reopenedclosed

comment:42 Changed 7 years ago by rdworth

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

comment:43 Changed 7 years ago by Scott González

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

comment:44 Changed 7 years ago by 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) :-(

comment:45 Changed 7 years ago by 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.

comment:46 Changed 7 years ago by 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.

comment:47 Changed 6 years ago by 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.

Last edited 6 years ago by MSwaff (previous) (diff)
Note: See TracTickets for help on using tickets.