ICEfaces
  1. ICEfaces
  2. ICE-10982

ace:dataTable - Column alignment issue with certain CSS requirements

          Details

          • Type: Bug Bug
          • Status: Closed
          • Priority: Major Major
          • Resolution: Won't Fix
          • Affects Version/s: EE-3.3.0.GA_P03, 4.1.1
          • Fix Version/s: EE-3.3.0.GA_P04
          • Component/s: ACE-Components
          • Labels:
            None
          • Environment:
            All
          • Assignee Priority:
            P1
          • Support Case References:
          • Workaround Exists:
            Yes
          • Workaround Description:
            Hide
            1. Add a rowIndexVar="i" attribute to the ace:dataTable component.
            2. For each ace:column component, modify the style attribute to this:
            style="#{i == 0 ? '' : 'width:25%'};"
            Make sure to specify the respective width percentage for each column.
            3. You may avoid doing the previous step for the last column, since it's not really necessary, and it seems to cause the appearance of a horizontal scrollbar if you do apply the previous step to it.
            Show
            1. Add a rowIndexVar="i" attribute to the ace:dataTable component. 2. For each ace:column component, modify the style attribute to this: style="#{i == 0 ? '' : 'width:25%'};" Make sure to specify the respective width percentage for each column. 3. You may avoid doing the previous step for the last column, since it's not really necessary, and it seems to cause the appearance of a horizontal scrollbar if you do apply the previous step to it.

            Description

            A customer wants to use the ace:dataTable with scrolling enabled. They have a few requirements:
             1. Usage of percentage column widths to facilitate a responsive design.
             2. Hidden overflow of table cells.
             3. Have all columns displayed on the page (no vertical scrollbar).

            These requirements are possible through some additional CSS:
             1. Add the width CSS values on the ace:column tag.
             2. Usage of an h:panelGroup that surrounds the column contents (<h:panelGroup layout="block" style="overflow-x:hidden; white-space: pre;">).
             3. Setting "table-layout: fixed !important;" to the style class rendered for the dataTable.

            With these CSS changes added, the column alignment of the scrollable dataTable becomes compromised.

            The purpose of this JIRA is to investigate a way to satisfy all of the requirements but prevent the columns from being miss-aligned, through changes to the dataTable code or via other CSS changes.
            1. FixedLayout.jpg
              163 kB
            2. NoFixedLayout.jpg
              107 kB

              Activity

              Ascending order - Click to sort in descending order
              Hide
              Permalink
              Arran Mccullough added a comment -

              Attached test case and screen shots of the resulting behavior.

              Steps:

              • Load welcomeICEfaces.jsf
              • A tabSet is rendered, one tab shows the usage of the fixed table layout with the other CSS changed. The other tab shows how the table is rendered without the fixed layout but with the same CSS changes.
              Show
              Arran Mccullough added a comment - Attached test case and screen shots of the resulting behavior. Steps: Load welcomeICEfaces.jsf A tabSet is rendered, one tab shows the usage of the fixed table layout with the other CSS changed. The other tab shows how the table is rendered without the fixed layout but with the same CSS changes.
              Hide
              Permalink
              Arturo Zambrano added a comment - - edited

              I came up with a hack/workaround for this issue at the app level.

              First, I want to mention that I could only reproduce this issue on Firefox, not on Chrome and IE. I see the same issue in the 4.0 trunk, and it's not something that gets fixed by resizing the window, which causes the resizeScrolling() function to fire again and re-process all widths, which sometimes corrects the misalignments.

              Second, I found out that what causes the misalignments is setting specific widths in conjunction with the table-layout:fixed; styling (points 1 and 3 in the description). Isolating any of these custom stylings or combining any two of them (except for 1 and 3) doesn't cause the misalignment.

              Third, the purpose of the resizeScrolling() function is to compare the widths of the body columns and the header columns and then dynamically generate a stylesheet to match their widths to whichever is larger. I realized that this is being done correctly, but because the columns have specific widths in their style attribute, this is overriding the styling in the dynamically-generated stylesheet.

              Fortunately, I found out that removing these style attributes, only from the columns in the first row, fixes the problem. So, the hack/workaround is very simple and works like this:
              1. Add a rowIndexVar="i" attribute to the ace:dataTable component.
              2. For each ace:column component, modify the style attribute to this: 

              style="#{i == 0 ? '' : 'width:25%'};"

              Make sure to specify the respective width percentage for each column.
              3. You may avoid doing the previous step for the last column, since it's not really necessary, and it seems to cause the appearance of a horizontal scrollbar if you do apply the previous step to it.

              I tested this workaround on Chrome and IE, and it doesn't affect anything. Please try this workaround and provide feedback. If we see that it works consistently, we can consider it integrating it into our resizeScrolling() function.

              Show
              Arturo Zambrano added a comment - - edited I came up with a hack/workaround for this issue at the app level. First, I want to mention that I could only reproduce this issue on Firefox, not on Chrome and IE. I see the same issue in the 4.0 trunk, and it's not something that gets fixed by resizing the window, which causes the resizeScrolling() function to fire again and re-process all widths, which sometimes corrects the misalignments. Second, I found out that what causes the misalignments is setting specific widths in conjunction with the table-layout:fixed; styling (points 1 and 3 in the description). Isolating any of these custom stylings or combining any two of them (except for 1 and 3) doesn't cause the misalignment. Third, the purpose of the resizeScrolling() function is to compare the widths of the body columns and the header columns and then dynamically generate a stylesheet to match their widths to whichever is larger. I realized that this is being done correctly, but because the columns have specific widths in their style attribute, this is overriding the styling in the dynamically-generated stylesheet. Fortunately, I found out that removing these style attributes, only from the columns in the first row, fixes the problem. So, the hack/workaround is very simple and works like this: 1. Add a rowIndexVar="i" attribute to the ace:dataTable component. 2. For each ace:column component, modify the style attribute to this: style= "#{i == 0 ? '' : 'width:25%'};" Make sure to specify the respective width percentage for each column. 3. You may avoid doing the previous step for the last column, since it's not really necessary, and it seems to cause the appearance of a horizontal scrollbar if you do apply the previous step to it. I tested this workaround on Chrome and IE, and it doesn't affect anything. Please try this workaround and provide feedback. If we see that it works consistently, we can consider it integrating it into our resizeScrolling() function.

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: