Support Article
Grid filter icon does not align as expected with column header
SA-36508
Summary
When a grid is configured with filtering and 'Freeze Grid Header' option is enabled, then at runtime, the column header does not align as expected with the filter icon.
It aligns as expected in Firefox but does not in Chrome or Internet Explorer browsers.
In Internet Explorer, the filter icon appears above the column header.
In Chrome browser, the filter icon appears below the column header.
Error Messages
Not Applicable
Steps to Reproduce
1. Setup a repeat grid with filtering enabled.
2. Also make sure 'Freeze Grid Header' is checked on the Presentation tab.
3. At runtime, notice the alignment of the column header with the filter icon.
Root Cause
In Internet Explorer, the anchor element for filter icon needs have height set to render properly.
In Chrome browser, the oflowDiv gets an additional height which causes the issue. It does not get the height in other browsers.
Resolution
To fix this issue in Internet Explorer, apply HFix-33600.
To fix this issue in Chrome browser, include the following CSS snippet in UserWorkForm / CSS file referenced in the harness rule:
<style>
.chrome th[role='columnheader'] > div.oflowDiv {
height: auto!important;
}
</style>
Published May 9, 2017 - 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.