PDA

View Full Version : [STALE-613] Ext.Window generates horizontal scrollbar modal and page has scrollbar



dirving
11 Jan 2008, 10:35 AM
Hi guys,

I've tested the following bug on Firefox 2.x and Safari 2 on OSX. I'm using Ext 2.0 stable and I'm using the ext-base adapter.

The problem occurs when an Ext.Window is shown with the modal option on a page that has a vertical scrollbar. It seems that the modal backdrop doesn't account for the vertical scrollbar being present so it adds another 15 or so unnecessary pixels to the width. Attached is an example that generates this problem.



<head>
<script language="javascript" type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="ext/ext-all-debug.js"></script>
<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script>

var exampleDlg = null;

function showExample() {
if (!exampleDlg){
exampleDlg = new Ext.Window({
el: 'windowData',
layout: 'fit',
width: 500,
height: 300,
closeAction: 'hide',
plain: true,
title: 'Example',
modal: true
});
}
exampleDlg.show(this);
}
</script>
</head>
<body>
<div id="longScrollingDiv" style="height:1000px">
This is a long div to generate a vert scroll bar<br><br>
<input type="button" value="Click To Generate Window" onClick="showExample();">
</div>
<div id="windowData"></div>
</body>

RyanG
12 Jan 2008, 6:15 AM
Hi there - FYI this also occurs in Safari 3 on Windows too, but happens when you initially click to resize a non-modal Ext.Window, ie. before you drag or actually move the mouse as such.


Best,
Ryan

dirving
14 Jan 2008, 8:00 AM
Anyone have any ideas? Given the popularity of the old Ext.BasicDialog and the move to Ext.Window, this seems like it would have come up before now

dirving
14 Jan 2008, 8:50 AM
After looking at the code, It appears that the problem is that Ext is using Ext.lib.Dom.getViewWidth (from the adapter) to set the mask width and since Ext.lib.Dom.getViewWidth always returns the maximum width of either the viewport or the document, it returns the width without subtracting the scrollbar.

dirving
24 Jan 2008, 8:19 AM
bump

aconran
24 Jan 2008, 11:29 AM
Have you tested with 2.0.1?

RyanG
25 Jan 2008, 1:31 AM
Hi Aaron,

I just did with my issue above on Safari3/Windows, and the same problem persists.
Should also point out that I'm using latest ext2 SVN with build_ext_packages.py - there shouldn't be much difference to that than 2.0.1 static build currently right?

Best,

Ryan

brian.moeskau
25 Jan 2008, 2:23 AM
Confirmed that this is an issue. It's not platform specific. It's on our list to look at.

ktp
9 Mar 2008, 2:16 PM
For me it works using the following css:



html {
overflow: -moz-scrollbars-vertical;
}
sincerely yours,
ktp.

urmilkapadia
5 Nov 2008, 1:33 PM
Hi Brian

Any update on this problem. Is Extjs team is looking this problem?

Whatever ktp is suggested is not worked for me.

Thanks
Urmil

reycri
28 Jan 2009, 9:58 AM
I have workaround for this problem:

1. In the modal window's "beforeshow" event, do this:

document.body.style.overflowX = "hidden";

2. In the modal window'w "destroy" (or "hide" depending on the closeAction you use), do this:

document.body.style.overflowX = "";

This effectively forces the horizontal scrollbar to not show (or be hidden if it is shown) while the modal window (and its mask) is showing.

Hope this helps...

aconran
28 Jan 2009, 10:13 AM
Is this a OS X FF2x issue only?

reycri
28 Jan 2009, 10:19 AM
I only have access to Windows computers. I've seen this problem on Firefox, Chrome, and Safari. I'm using Ext 2.2.

The problem is when the Ext.Window class sets the size for the mask (for modality), the width returned by Ext.lib.Dom.getViewWidth(true) is too big. This is because it includes the width of the vertical scrollbar of the browser.

aconran
28 Jan 2009, 10:48 AM
What adapter are you using?

reycri
28 Jan 2009, 10:55 AM
I'm using ext-base.

The problem is with document.body.scrollWidth. I'm not a DOM lawyer, but I think the browsers are returning the wrong value. Although it's odd that 3 browsers are all doing it wrong.

elspoono
5 Feb 2009, 11:17 AM
The problem only occurs when a scroll bar is already present vertically. This same "bug" of not accounting for scroll bars in the display window width/height manifests itself other places as well (constrain on said window, showing a menu, etc).

Specifically, creating a window within a page that has a horizontal scroll bar and setting constrain: true on it, moving that window to the far right will place it below the scroll bar slightly. Not a big deal, but undesired and unexpected.

All of this was present in Firefox 3 / Chrome 1 in my tests.

kjleng
2 Mar 2009, 4:27 PM
I seem to have the same issue, but a little more noticable, my modal window is being rendered to a tab panel. When I show the window, the tab panel is masked, as intended, but v and h scrollbars are added so that the size of the mask is the same size as the viewport of the current page... I'm only masking a single tab on that page, so I would exspect the size of the mask to be the size of the element being rendered to.

stever
14 Apr 2009, 10:29 PM
I'm using ext-base.

The problem is with document.body.scrollWidth. I'm not a DOM lawyer, but I think the browsers are returning the wrong value. Although it's odd that 3 browsers are all doing it wrong.

Try this. I came across it when I was porting Ex2 fixes over to Ext3 (it fixes the scrollbars showing when a modal window appears). It is in extbase:


getViewportWidth: function() {
var width = self.innerWidth; // Safari
var mode = document.compatMode;

if (mode || Ext.isIE) { // IE, Gecko, Opera
width = (mode == "CSS1Compat") ?
document.documentElement.clientWidth : // Standards
document.body.clientWidth; // Quirks
}
return width;
},

sanraj
27 May 2009, 6:38 AM
Hi,

I am getting the same issue.
Can someone explain me the required change for this issue?

Thanks in advance...
-sanraj

reycri
28 May 2009, 6:11 AM
Hi,

I am getting the same issue.
Can someone explain me the required change for this issue?

Thanks in advance...
-sanraj

As I posted before, here is my workaround for this:


I have workaround for this problem:

1. In the modal window's "beforeshow" event, do this:

document.body.style.overflowX = "hidden";

2. In the modal window'w "destroy" (or "hide" depending on the closeAction you use), do this:

document.body.style.overflowX = "";

This effectively forces the horizontal scrollbar to not show (or be hidden if it is shown) while the modal window (and its mask) is showing.

Hope this helps...

m4ck
3 Jun 2009, 5:35 PM
I had this issue only in Opera (IE7/FF3/Chrome/Safari seemed ok) and was able to resolve it with the following override:



Ext.override( Ext.Window,
{
listeners:
{
beforeshow: function( w )
{
document.body.style.overflow = 'hidden';
},

hide: function( w )
{
document.body.style.overflow = '';
}
}
});
Thanks to reycri for the original idea :)

bbg
19 Feb 2010, 8:28 PM
I experience this problem with new ExtJS 3.1.1.
Here is my solution:



Ext.lib.Dom.getViewportWidth = function() {
var doc = document;
return !Ext.isStrict && !Ext.isOpera || Ext.isGecko3 ? doc.body.clientWidth :
Ext.isIE ? doc.documentElement.clientWidth : self.innerWidth;
}

mystix
20 Feb 2010, 4:34 AM
[ moved to 3.x Bugs from 2.x Bugs ]

bug reportedly affects both 3.x and 2.x branches.

Jamie Avins
24 Feb 2010, 6:26 PM
I cannot duplicate this, can someone please update the browser version, docType and OS you are using to replicate this.

bbg
26 Feb 2010, 6:48 PM
Hi!

I use Linux Gentoo, Firefox 3.6-r2, extjs-3.1.1. Also I experienced this trouble with Firefox-3.5 and extjs-3.0, extjs-3.1.

The horizontal scroll appears because the width of background mask of modal windows overcomes the actual browser document width.

Here is the mask element:


<div class="ext-el-mask" id="ext-gen717" style="display: block; width: 1678px; height: 559px; z-index: 9010;"></div>


But actually according to Firebug:


document.documentElement.clientWidth = 1663


I think it's caused by my special body style:


body: {
overflow-y: scroll;
}

So the vertical scrollbar is always visible and it takes 15px from width.

I made the fix mentioned above about 6 months ago and still have no troubles. Tested in Firefox-[3.5, 3.6], Chromium-[4.0.295.0_p35884, 5.0.308.0_p37385].
IE and Opera are banned on my site.

sencha14
28 Jan 2011, 4:05 PM
You are right!

In my case I had it on html element from html5boilerplate (http://html5boilerplate.com/) template. D'oh!
/* always force a scrollbar in non-IE */
html { overflow-y: scroll; }



Hi!

I use Linux Gentoo, Firefox 3.6-r2, extjs-3.1.1. Also I experienced this trouble with Firefox-3.5 and extjs-3.0, extjs-3.1.

The horizontal scroll appears because the width of background mask of modal windows overcomes the actual browser document width.

Here is the mask element:


<div class="ext-el-mask" id="ext-gen717" style="display: block; width: 1678px; height: 559px; z-index: 9010;"></div>


But actually according to Firebug:


document.documentElement.clientWidth = 1663


I think it's caused by my special body style:


body: {
overflow-y: scroll;
}

So the vertical scrollbar is always visible and it takes 15px from width.

I made the fix mentioned above about 6 months ago and still have no troubles. Tested in Firefox-[3.5, 3.6], Chromium-[4.0.295.0_p35884, 5.0.308.0_p37385].
IE and Opera are banned on my site.