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

Centering data with headers that have filter icons

While the page is loading, the columns are set with defined width within the vue file, these appear to be correct. See image below for loading screen. The two examples (2nd & 3rd col) below are center aligned using:

type: 'string', width: 120, headerTextAlign: "Center", textAlign: "Center" },


However, once the page is finally loaded, the columns collapse down and push the filter icons right next to the header text. I have used the .eheadercelldiv styling used in other forum posts about centering... which does center the header & column text, but now creates the cramped text/icon issue seen below. Grid-filtericon2.jpg

Any help is appreciated.

1 Reply

HS Hemanthkumar S Syncfusion Team April 14, 2023 03:36 PM UTC

Hi Steve Hanson,

Before we start providing a solution to your query, we need some information for our clarification. So, please share the below details which will be helpful for us to provide a better solution.

  1. Are you using the column AutoFit feature in the grid?
  2. Share your complete Grid rendering code.
  3. Share the Syncfusion package version.
  4. Share the video demo, Which help us to better understand your query.


Hemanth Kumar S

Live Chat Icon For mobile
Up arrow icon