PDA

View Full Version : Horizontal scrollbar missing in Firefox - bug in CSS?



blowfish
14 Jul 2009, 11:50 PM
I was exploring with nested layouts and experienced some problems with scrollbars.

The online Table Layout sample (ExtJs 3.0) can be used to reproduce the problem:
Launch "http://extjs.com/deploy/dev/examples/layout/table.html"
Resize browser to be smaller than the table content width, so that some content become hidden.

Got inconsistent result with different browsers:
IE7 (Windows): horizontal scrollbar shows up
Firefox3 (Windows): no horizontal scrollbar IE behavior is desirable, for my use case at least. (Otherwise, how will the user be able to see the content that does not fit into the visible screen area?)

Any ideas on how to fixing the missing scrollbar problem in FF? This is a critical issue, because the user is not able to view the full content or may not even be aware that there's more content to see.

Is this a bug? (Btw, vertical scrollbar behaves well for both browsers.)

blowfish
15 Jul 2009, 10:29 PM
If I remove "overflow:hidden" from "x-panel-body" and "x-panel-bwrap" class from ext-all.js (three places to change), the horizontal bar starts to show up in FF, when the table content is wider than its containers and a container is scrollable.

It seems to me when a layout does not auto resize (i.e. Table layout), it should allow a scroll bar when necessary for the user to see the full content. And it works as expected in IE, but not FF.

Is this a bug in CSS? Or did I misunderstand?

blowfish
16 Jul 2009, 9:00 PM
Any suggestion? Thanks!

blackghost
5 Sep 2009, 8:24 AM
I got the same problem, any ideas ?

Animal
5 Sep 2009, 8:34 AM
I was exploring with nested layouts and experienced some problems with scrollbars.

The online Table Layout sample (ExtJs 3.0) can be used to reproduce the problem:
Launch "http://extjs.com/deploy/dev/examples/layout/table.html"
Resize browser to be smaller than the table content width, so that some content become hidden.

Got inconsistent result with different browsers:
IE7 (Windows): horizontal scrollbar shows up
Firefox3 (Windows): no horizontal scrollbar IE behavior is desirable, for my use case at least. (Otherwise, how will the user be able to see the content that does not fit into the visible screen area?)

Any ideas on how to fixing the missing scrollbar problem in FF? This is a critical issue, because the user is not able to view the full content or may not even be aware that there's more content to see.

Is this a bug? (Btw, vertical scrollbar behaves well for both browsers.)


In that particular example, it's coded not to do that. The Panel is not configured with autoScroll: true


If you want a Panel's content to be able to scroll if it larger than the size of the Panel, then you configure tha Panel with autoScroll: true

(Note, this is for Panels that are Containers, not GridPanels. GridPanels scroll their data area when size-restricted)

picofaradpjf
13 Nov 2009, 12:29 AM
I'm having the same problem with nested Panels in FireFox, while all seems well in IE. I am using a defined width and 'autoScroll: true' on the panel I wish would scroll. I also had to remove every "overflow:hidden" from the "x-panel-body" and "x-panel-bwrap" classes in ext-all.css to get the horizontal scrollbar to appear.

Brief description of my panels:
Border layout with North, West, Center, and South regions
In the West region a border layout with a Center and South region
In this West-Center region a Tree Panel.

I want the West-Center to have scroll bars if/when the tree overflows, but even with autoScroll:true I have to resort to hacking ext-all.css to get the horizontal scrollbar to work in FF.