Support Article
Center alignment for column header does not work
SA-51616
Summary
Unable to align the Headers in a Repeat Grid layout centrally. This occurs despite adding 'text-align: center' style in the Skin rule for Column Headers.
Error Messages
Not Applicable
Steps to Reproduce
- Add a Repeat Grid layout and customize the format.
- Navigate to the application Skin > Custom Grid format. Set the grid format to 'text-align: center;' in the column headers Additional styles.
Root Cause
A defect in Pegasystems’ code or rules. The Center Alignment did not work because the grid column header markup and the styles generated by the skin for column headers were incorrect.
Resolution
Perform the following local-change:
Include the below code either in the UserWorkForm (to apply the style throughout the application) or in a CSS file (to refer to the CSS file in all the harnesses).
<style>
div.gridDefault div.default th.cellCont div.divCont {
margin-left: auto;
margin-right: auto;
}
</style>
Note: The 'default' in the div.default is custom to the Grid Layout format, and must be changed accordingly.
Published February 27, 2018 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.