1. #1
    Ext User blowfish's Avatar
    Join Date
    Jun 2009
    Posts
    8
    Vote Rating
    0
    blowfish is on a distinguished road

      0  

    Question Horizontal scrollbar missing in Firefox - bug in CSS?

    Horizontal scrollbar missing in Firefox - bug in CSS?


    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:
    1. Launch "http://extjs.com/deploy/dev/examples/layout/table.html"
    2. Resize browser to be smaller than the table content width, so that some content become hidden.
    3. 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.)

  2. #2
    Ext User blowfish's Avatar
    Join Date
    Jun 2009
    Posts
    8
    Vote Rating
    0
    blowfish is on a distinguished road

      0  

    Question


    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?

  3. #3
    Ext User blowfish's Avatar
    Join Date
    Jun 2009
    Posts
    8
    Vote Rating
    0
    blowfish is on a distinguished road

      0  

    Question


    Any suggestion? Thanks!

  4. #4
    Ext User
    Join Date
    Aug 2009
    Posts
    19
    Vote Rating
    0
    blackghost is on a distinguished road

      0  

    Default


    I got the same problem, any ideas ?

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by blowfish View Post
    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:
    1. Launch "http://extjs.com/deploy/dev/examples/layout/table.html"
    2. Resize browser to be smaller than the table content width, so that some content become hidden.
    3. 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)

  6. #6
    Sencha User
    Join Date
    Oct 2007
    Posts
    17
    Vote Rating
    1
    picofaradpjf is on a distinguished road

      0  

    Default


    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.