#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 )
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 (48)
comment:1 Changed 15 years ago by
Component: | ui.core → ui.dialog |
---|
comment:2 follow-up: 18 Changed 15 years ago by
comment:3 Changed 15 years ago by
Milestone: | TBD → 1.6 |
---|---|
Priority: | minor → major |
comment:4 Changed 15 years ago by
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 15 years ago by
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 15 years ago by
Milestone: | 1.7 → 1.8 |
---|
comment:7 Changed 14 years ago by
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 14 years ago by
My fix is:
- Edit jquery-ui-1.7.2.custom.min.js
- Find: addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});
- Delete: .css({width:this.width(),height:this.height()})
- It should become like this: addClass("ui-widget-overlay");
- Save your file.
- Edit jquery-ui-1.7.2.custom.css
- Find: .ui-width-overlay
- Make sure you have both width and height set to 100%.
- You're done.
comment:9 Changed 14 years ago by
Something went wrong in my previous post.
My fix is:
- Edit jquery-ui-1.7.2.custom.min.js
- Find: addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});[[BR]]
- Delete: .css({width:this.width(),height:this.height()})[[BR]]
- It should become like this: addClass("ui-widget-overlay");
- Save your file.
- Edit jquery-ui-1.7.2.custom.css
- Find: .ui-width-overlay
- Make sure you have both width and height set to 100%.
- You're done.
comment:10 Changed 14 years ago by
Bah, this text form is crap.
Something went wrong in my previous post.
My fix is:
- Edit jquery-ui-1.7.2.custom.min.js
- Find: addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});
- Delete: .css({width:this.width(),height:this.height()})
- It should become like this: addClass("ui-widget-overlay");
- Save your file.
- Edit jquery-ui-1.7.2.custom.css
- Find: .ui-width-overlay
- Make sure you have both width and height set to 100%.
- You're done.
comment:11 Changed 14 years ago by
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 Changed 14 years ago by
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 14 years ago by
Version: | 1.5.2 → 1.7.2 |
---|
As Suner mentions I can only recreate this bug in IE with this test page http://jsbin.com/anuso
comment:16 Changed 14 years ago by
Description: | modified (diff) |
---|
comment:18 Changed 14 years ago by
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 14 years ago by
Priority: | major → critical |
---|
comment:20 Changed 13 years ago by
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 13 years ago by
Attachment: | overlayscrollbar_demo.html added |
---|
comment:24 Changed 13 years ago by
Priority: | critical → major |
---|
comment:22 Changed 13 years ago by
Resolution: | → fixed |
---|---|
Status: | reopened → closed |
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 13 years ago by
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 13 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
comment:25 Changed 13 years ago by
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 13 years ago by
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 12 years ago by
Resolution: | → fixed |
---|---|
Status: | reopened → closed |
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 follow-up: 29 Changed 12 years ago by
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 ?
comment:29 Changed 12 years ago by
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 12 years ago by
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 12 years ago by
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 12 years ago by
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:34 Changed 12 years ago by
Milestone: | 1.9 → 1.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 12 years ago by
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.
comment:36 follow-up: 38 Changed 12 years ago by
Can anyone confirm that my test case is correct in order to re-open the bug ?
comment:37 Changed 12 years ago by
I'm very surprised that nobody answers me ? Must I create an other ticket ?
comment:38 follow-up: 39 Changed 12 years ago by
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
comment:39 Changed 12 years ago by
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.
comment:40 Changed 12 years ago by
Milestone: | 1.8.14 |
---|---|
Resolution: | fixed |
Status: | closed → reopened |
@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?
comment:41 Changed 12 years ago by
Milestone: | → 1.9 |
---|---|
Resolution: | → fixed |
Status: | reopened → closed |
comment:43 Changed 12 years ago by
nope, this is a problem on the first use and that was specifically for reuse.
comment:44 Changed 12 years ago by
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 12 years ago by
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 12 years ago by
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 12 years ago by
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.
Can you please provide some more information. Perhaps a test page?