Filter icon positioning

[Shawn]

Hello,

The column filter icons on my grid are interfering with the column header texts.  Sometimes they are right on top of the texts (see attached).  How do I position these icons so that they are on the bottom right corner of the column header and away from the header text?

Thanks,

Shawn A.

[Tsvetomir]

Hi Shawn,

Generally, the filter's icon would be stacked over the header's text. Based on the provided screenshot, I suspect that there might be custom CSS which overrides the built-in styles. Can you provide a small project in which the relevant styles are applied? Nevertheless, the button for the filter, respectively, the filter icon can be accessed as shown below:

<style>
  a.k-grid-filter{
    /* position the filter icon accordingly*/
  }
</style>

Kind regards,
Tsvetomir
Progress Telerik

[Shawn]

Hello Tsvetomir,

Thank you for your reply.  I'm using a theme that I created using the "Progress Sass ThemeBuilder" for ASP.NET Core "based on Bootstrap 4".  I believe it was called "Forest".  Unfortunately, I am unable to provide you with a project, as the size would be too large when the CSS files are included (even when zipped).  I'm not sure why using this theme would cause the icon not to be "stacked over the header's text".

I tried using the code you provided above to change the filter position, however, I'm not sure what to enter to for "position the filter icon accordingly".  Can you provide a sample of how I can move the filter icon to the bottom right corner of the header?  Thanks.

Regards.

Shawn A.

[Shawn]

Hello Tsvetomir,

Please disregard my previous request.  I've figured out how to position the icon:

a.k-grid-filter {
    position: absolute;
    bottom: 0;
    right: 0;
}

 

Please, however, let me know if you believe there is a better way to achieve this.  Thanks.

Regards,

Shawn A.

[Tsvetomir]

Hi Shawn,

When styles have to be applied to any elements, given the current scenario, a complex widget such as the Kendo UI Grid, they have to be tested locally. In my previous response, I provided simply the selector which would target the filter icon and left the actual styles to be tailored according to your preferences. As I do not have the same scenario replicated locally, I might have provided styles which are not compatible with your project. 

The CSS styles that you have shared look correct to me. If after conducting tests you consider them as a good fit, then it is fine to use them as-is. At first glance, I do not believe that they would interfere with the default ones, and consequently ruin the overall appearance of the widget.

I hope you find this helpful. Feel free to contact me in case any questions arise.


Kind regards,
Tsvetomir
Progress Telerik