Applies to Pega Platform versions 7.2 through 8.4
Learn how to resolve or prevent typical issues with grid layout misalignment.
Scenario 1 Fixed table column headers do not align with rows
Scenario 2 Tree grid layout displays mismatched row heights
Scenario 3 Hierarchical table with data page as source is distorted
Scenario 4 Hierarchical table columns are misaligned
Scenario 1 Fixed table column headers do not align with rows
If your table layout grid has fixed column headers, you might see misalignment of the information in the rows of the table. Fixed column headers apply the freeze header option, which pins the column headers to a static position when users scroll through the rows of the table grid.
Here is an example of this misalignment:
Scenario 1 Suggested approaches
When misalignment occurs between the fixed column headers of a table layout and the scrolling data in the rows below the headers, try one or more of the following adjustments using the Table Layout – Presentation tab
Click the View properties icon in the Grid Repeat Layout header to display the Properties panel, and then select the Presentation tab.
- Width of Content: Increase the width of the columns where the contents do not fit the specified cell width.
- Wrap the text in the header and the data cells.
- Fixed (pixel) size grid: Select this check box to set fixed pixel size for the grid.
- Reduce the number of columns in the grid. Use different master-details edit modes, for example, modal dialog or expandable rows.
Scenario 2 Tree grid layout displays mismatched row heights
If your tree grid layout displays a row height for Column 1 that does not match the row heights of the other columns of the grid layout, you need to examine how you implemented the grid layout.
By design, the tree grid consists of four sections:
- Left header table, which contains the first header and is an unordered list <ul> - list item <li> structure
- Right header table, which contains all other headers and is a table
- Left body table, which is the first column apart from the header and is also an unordered list <ul> - list item <li> structure
- Right body table, which contains all other columns minus all other headers and is a table
The rows in both the left body table and right body table are assigned their heights according to what is specified during design time. However, during run time, if the height of any cell exceeds the height configured during design time, the corresponding row (left or right) is forced to increase its height, causing the misalignment.
Scenario 2 Suggested approach
To resolve mismatched row heights in a table layout, you can increase the row height of the tree grid in the tree grid data row property panel.
Scenario 3 Hierarchical table with data page as source is distorted
See SA-98976, User Interface is distorted on the Internet Explorer browser.
Scenario 4 Hierarchical table columns are misaligned
On reported case involved an upgrade from Pega 7 (tree grid) to Pega 8.2.4. The upgrade converted the tree grid with correctly aligned columns to a hierarchical table with misaligned columns.
Steps to reproduce
- Upgrade from a Pega 7 release to a Pega 8 release.
- Notice that former tree grids are now hierarchical tables with misaligned columns.
- Refer to Create a hierarchical table layout.
- Refine the Repeating Area of the hierarchal table to include columns with lots of content.
- The hierarchical table columns are still misaligned.
Solution
See SA-98191, Columns are misaligned in a Hierarchical Table layout.
Related Content
How to add a Grid layout to a section
Troubleshooting Flex-based layout issues for Internet Explorer 11
FAQs about grid layouts based on templates
Troubleshooting nested grid issues *UPDATE link after migration*