Details
-
Type: Bug
-
Status: Closed
-
Priority: 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:Support Case #13631 - https://icesoft.my.salesforce.com/5007000001VgH4y
-
Workaround Exists:Yes
-
Workaround Description:
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. 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.
Activity
Arran Mccullough
created issue -
Arran Mccullough
made changes -
Field | Original Value | New Value |
---|---|---|
Attachment | Case13631Example2.war [ 22110 ] | |
Attachment | Case13631Example2.zip [ 22111 ] | |
Attachment | FixedLayout.jpg [ 22112 ] | |
Attachment | NoFixedLayout.jpg [ 22113 ] |
Ken Fyten
made changes -
Summary | ace:dataTable - Column alingment issue with certain CSS requirements | ace:dataTable - Column alignment issue with certain CSS requirements |
Ken Fyten
made changes -
Assignee | Arturo Zambrano [ artzambrano ] | |
Fix Version/s | EE-3.3.0.GA_P04 [ 12270 ] | |
Assignee Priority | P1 [ 10010 ] |
Arturo Zambrano
made changes -
Workaround Description |
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. |
|
Workaround Exists | Yes [ 10007 ] |
Arturo Zambrano
made changes -
Status | Open [ 1 ] | Resolved [ 5 ] |
Resolution | Won't Fix [ 2 ] |
Ken Fyten
made changes -
Status | Resolved [ 5 ] | Closed [ 6 ] |
Attached test case and screen shots of the resulting behavior.
Steps: