Grid filter icon overlaps column header text

[eric]

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?

[eric]

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;

}

[Rajapandiyan Settu]

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.

Regards,

Rajapandiyan S

[eric]

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.

[eric]

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.

[Rajapandiyan Settu]

Eric,

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.

Regards,

Rajapandiyan S