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

              There are no subversion log entries for this issue yet.

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: