Bad generated header in grid

Hello, Pavel,

Thank you for the screenshots and details.

I tried making a similar example but it is working on my end:

https://stackblitz.com/edit/react-hh9w8z?file=index.js



If possible, please modify the provided example in order to reproduce the issue and I will happily continue with the investigation.

Regards,
Stefan
Progress Telerik

I modify sample ( in my project is used metronic template, so sample index.html is bigger):

https://stackblitz.com/edit/react-wcrmq8?file=index.html

At the end of html page is part

<!-- BEGIN: Aside Menu -->
          <div id="m_ver_menu" class="m-aside-menu m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark m-scroller ps ps--active-y" m-menu-vertical="1" m-menu-scrollable="1" m-menu-dropdown-timeout="500" style="position: relative; height: 600px; overflow: hidden;">                    
</div>

If I set height: 100px grid is rendered fine and correct. But If I changed height to 700px  (grid is generated at bottom of page and bad)

I minimize sample to:

https://stackblitz.com/edit/react-j4baeh?file=index.html

than Edge rendering better (but try to refresh 1x or 2x), but Firefox rendered always bad.

Hello,

The header and the body are two tables in your example, since the grid is scrollable by default. And the custom styles of your page are overriding the syncing between the tables.
There are 3 options to resolve the issue, you could pick one of them that is most convenient for you:

- Set width for all of the Columns.
- Or remove the display: flex from the styles, change it's specificity, or override it for the grid.
- set scrollable="none" for the Grid

Regards,
Vasil
Progress Telerik

Thanks for your help