We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Grid filter icon overlaps column header text

What is the recommended way to deal with the filter icon that appears in the column header overlapping with the column header text when you've aligned the column header text to the right?

Do I need to come up with my own CSS to deal with this?

5 Replies

ER eric February 24, 2023 02:51 PM UTC

I have applied the following CSS...is this the right way to tackle this or am I missing something I can configure with the Grid? This CSS does seem to solve the issue.

.e-icon-filter {
margin-left:5px !important;

.e-headertext {
margin-right: 15px !important;

RS Rajapandiyan Settu Syncfusion Team February 27, 2023 12:21 PM UTC

Hi Eric,

Thanks for contacting Syncfusion support.

We are unable to reproduce the reported problem from our side, please find the sample for your reference.

Sample: https://stackblitz.com/edit/angular-h3nx2s?file=src%2Fapp.component.html,src%2Fapp.component.ts

To better understand the issue you're facing with the Grid, we would appreciate it if you could provide us with the following information:

  1. Complete code files (app.component.html & app.component.ts) and package.json file.
  2. Share the theme (material/ bootstrap/ fabric/ etc.,) you have used.
  3. Are you using any custom CSS in your project? Share the custom CSS if you facing the issue when applying it.
  4. If possible, share the issue reproducible sample or try to replicate the issue in given sample.

This information will help us replicate the issue and provide a solution.


Rajapandiyan S

ER eric replied to Rajapandiyan Settu February 28, 2023 05:30 PM UTC

Rajapandiyan thanks for the sample app.

I've removed angular theme css and all other CSS with the exception of the syncfusion CSS and still have the same issue.

It just seems like only a portion of the CSS is being applied no matter what I do.

I have tried applying the syncfusion css at the component level and at the app level and have seen the same results.

ER eric February 28, 2023 08:22 PM UTC

I solved this issue by using src/app.css to store the syncfusion grid CSS instead of using the components CSS to store the  syncfusion grid CSS.

RS Rajapandiyan Settu Syncfusion Team March 1, 2023 05:24 AM UTC


We are glad to hear that you have resolved the reported problem. Please define the Syncfusion CSS in the root CSS folder (src/app.css) to apply the styles and get back to us if you need further assistance.


Rajapandiyan S

Live Chat Icon For mobile
Up arrow icon