Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Ig-size doesn't work on igx-grid-cell when the grid is inside a igx-tabs


as you can see in the attachment, when a grid is inserted into a tab, the grid is no longer able to calculate the size of its rows,

leaving them with the standard size

In my app this is a major issue because almost all the grids are inside tabs and i need to resize them for the amount of data i'm showing.

The screenshot is taken from a blank project, so i know for sure it isn't an isolate issue.

We look forward to a reply from support

  • 40
    Offline posted

    Hello Andrea,

    Thank you for your patience as I investigated the styling issues you've encountered with the igx-grid component.

    After extensive testing and verification, I have identified that the behavior you reported appears to be due to an inconsistency in how CSS variables are applied to the igx-grid when it is nested within igx-tabs. To address this, I have logged the issue in our GitHub repository, which you can view and track here: GitHub Issue. Subscribing to the issue will give you the opportunity to directly communicate with our development team regarding this behavior and get notifications whenever new information is available.

    As a workaround until this issue is resolved, another option that IgxGrid provides for you, in order to be able to change the height of the rows in the Grid, is the property rowHeight. You can explicitly set the rowHeight property of the igx-grid to control the size of the rows. This approach should provide a sufficient solution while maintaining the appearance and functionality of your grid.

    <igx-grid #grid [data]="data" [rowHeight]="'80px'" width="100%" 
    height="550px" [allowFiltering]="true">

    Thank you for your understanding and cooperation.

    Best Regards,

    Arkan Ahmedov,