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, t
he 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 April 13, 2017 - Updated May 9, 2017

Have a question? Get answers now.

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