ICEfaces
  1. ICEfaces
  2. ICE-11292

ace:accordionPanel, unnecessary scrollbars appear when autoHeight="true"

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 4.2
    • Fix Version/s: EE-4.2.0.GA
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      Any

      Description

      After fixes related to ICE-11280, vertical scrollbars appear in accordion panes when they don't seem necessary. This occurs when autoHeight="true", because, in this case, all panes are set an explicit height in pixels, which is the height of the tallest pane. The fix for ICE-11280 adds style="height:100%;" to the inner content div. Thus, no matter what height is set, the scrollbars will always appear because the inner content node will take the same height plus the padding and border.
      1. horizontal.PNG
        49 kB
      2. vertical.png
        49 kB

        Activity

        Hide
        Arturo Zambrano added a comment -

        r51448: set the overflow CSS property to hidden on the main content pane, since the inner content pane will now contain the overflow:auto; styling (and thus, the scrollbars will appear as part of the inner content pane, if necessary)

        Taking into account the padding and border when calculating this height, wouldn't solve the problem, since the inner content node will always be the exact same height as the outer div, simply because of the "height:100%;" setting, plus the padding, which will still be applied on top of that, so the contents would always be taller than the outer div, regardless of how the height is calculated.

        Show
        Arturo Zambrano added a comment - r51448: set the overflow CSS property to hidden on the main content pane, since the inner content pane will now contain the overflow:auto; styling (and thus, the scrollbars will appear as part of the inner content pane, if necessary) Taking into account the padding and border when calculating this height, wouldn't solve the problem, since the inner content node will always be the exact same height as the outer div, simply because of the "height:100%;" setting, plus the padding, which will still be applied on top of that, so the contents would always be taller than the outer div, regardless of how the height is calculated.
        Hide
        Ken Fyten added a comment -

        When testing Emporium (IF4 trunk, svn rvn#51455) I'm seeing an issue when the browser window is resized.

        1. Open emporium.
        2. Make window wider, emporium app resizes appropriately.
        3. Make window narrower, emporium app doesn't shrink again like it should.
        Show
        Ken Fyten added a comment - When testing Emporium (IF4 trunk, svn rvn#51455) I'm seeing an issue when the browser window is resized. Open emporium. Make window wider, emporium app resizes appropriately. Make window narrower, emporium app doesn't shrink again like it should.
        Hide
        Arturo Zambrano added a comment -

        r51498: changed <li> elements for <p> elements with bvllet characters to avoid the issue of <li> elements taking the entire width and causing the horizontal scrollbars to appear

        r51499: ace:dataTable, modified the adjust footer width function to allow making the footer shorter when resizing the window

        The app wasn't shrinking only when tabs that contain an ace:dataTable were being displayed, and that was because an automatic width adjustment of the table footer (ICE-10727), which didn't allow to make it shorter.

        I could never see that brief appearance of the vertical scrollbars.

        Show
        Arturo Zambrano added a comment - r51498: changed <li> elements for <p> elements with bvllet characters to avoid the issue of <li> elements taking the entire width and causing the horizontal scrollbars to appear r51499: ace:dataTable, modified the adjust footer width function to allow making the footer shorter when resizing the window The app wasn't shrinking only when tabs that contain an ace:dataTable were being displayed, and that was because an automatic width adjustment of the table footer ( ICE-10727 ), which didn't allow to make it shorter. I could never see that brief appearance of the vertical scrollbars.
        Hide
        Liana Munroe added a comment -

        Tested with ICEfaces 4 trunk r51500, Tomcat 8, MS Edge, IE 11, 10, 9, 8, FF 47, Chrome 57.
        Verified that the extraneous horizontal scroll bars and resizing issue are fixed. I set up a test machine for Art to view the vertical scrollbars appearing when expanding or contracting an accordionPane . See screen shot vertical.PNG captured on my machine.

        Show
        Liana Munroe added a comment - Tested with ICEfaces 4 trunk r51500, Tomcat 8, MS Edge, IE 11, 10, 9, 8, FF 47, Chrome 57. Verified that the extraneous horizontal scroll bars and resizing issue are fixed. I set up a test machine for Art to view the vertical scrollbars appearing when expanding or contracting an accordionPane . See screen shot vertical.PNG captured on my machine.
        Hide
        Arturo Zambrano added a comment -

        r51505: fix to prevent vertical scrollbars from showing while applying effects

        Show
        Arturo Zambrano added a comment - r51505: fix to prevent vertical scrollbars from showing while applying effects
        Hide
        Liana Munroe added a comment -

        Tested with ICEfaces 4 trunk r51505, tomcat 8.
        The vertical scrollbars are no longer appearing however this fix causes a js console error in the showcase Required Styling demos:

        TypeError: a.newContent.get(...) is undefined
        http://localhost:8080/showcase2542/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=m2ofw5
        Line 14089
        
        Show
        Liana Munroe added a comment - Tested with ICEfaces 4 trunk r51505, tomcat 8. The vertical scrollbars are no longer appearing however this fix causes a js console error in the showcase Required Styling demos: TypeError: a.newContent.get(...) is undefined http: //localhost:8080/showcase2542/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=m2ofw5 Line 14089
        Hide
        Arturo Zambrano added a comment -

        r51513: fix to prevent null pointer exceptions in cases where an accordion panel has only one pane

        Show
        Arturo Zambrano added a comment - r51513: fix to prevent null pointer exceptions in cases where an accordion panel has only one pane
        Hide
        Liana Munroe added a comment -

        Verified ICEfaces 4 trunk r51513, Tomcat 8, MS Edge, IE 11, 10, 9, 8, FF 47, Chrome 57.

        Show
        Liana Munroe added a comment - Verified ICEfaces 4 trunk r51513, Tomcat 8, MS Edge, IE 11, 10, 9, 8, FF 47, Chrome 57.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arturo Zambrano
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: