Skip to main content
LinkedIn
Copied!

Table of Contents

Troubleshooting grid misalignment issues

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:

"Fixed column headers misaligned with data rows"
Fixed column headers misaligned with data rows

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

  1. Upgrade from a Pega 7 release to a Pega 8 release.
  2. Notice that former tree grids are now hierarchical tables with misaligned columns.
  3. Refer to Create a hierarchical table layout.
  4. Refine the Repeating Area of the hierarchal table to include columns with lots of content.
  5. The hierarchical table columns are still misaligned.

Solution

See SA-98191, Columns are misaligned in a Hierarchical Table layout.

Did you find this content helpful?

Related Content

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us