Make IgxGrid Height Responsive Without Fixed Pixels

I am having issue with grid height. When i resize the screen it will fix the size (because of height in pixcel). I need responsive size of the grid.

I tried to provide height in % but its not working for me. So can you please provide solution, how can i calculate grid height randomly or how can i pass height in %.

And also need help into text alignment of individual columns (right. left, center).

Hello Mahesh,

When setting the grid size in %, please make sure that the grid direct parent has its height set too, so that the grid can calculate properly its own height.

See this Stackblitz sample: Igx-grid height is set in % and its parent (the .grid__wrapper container, has its height set to 600px – see grid-paging.component.scss):

.grid__wrapper {

  height: 600px;

  background-color: pink;

}

<igx-grid #grid1 height="60%" width="100%">

Regarding the text alignment – you can use the cellClasses property to apply class to cells in a given column. In the same example, see that the BeatsPerMinite column is left aligned, while all other numeric columns are right aligned.

Code sample:

 <igx-column field="BeatsPerMinute" [cellClasses]="{'rightAligned' : true }"></igx-column>

  .rightAligned {

    text-align: left;

    justify-content: flex-start;

  }

Please let me know if you have further questions, I will be glad to help.

Thanks for your reply.

I tried cellClasses and its work as expected. However, I am facing issue in grid height. I followed your steps but height not append to igxgrid. Attached image for your reference.

Is it possible to send a stackblitz sample demonstrating the height issue ?

Hristo

Not possible because to lengthy code is there.  

Hi Manesh,

You can always isolate the sample  and provide it for investigation.

Do you bind the grid to remote data ? If so, it happens that the grid calculates its height before the data has arrived, which leads to the result described by you. In this case, you need to explicitly set the grid height when the data is available:

this.remoteDataService.getData().subscribe({
	next: (respData: any) => {
		// set grid height
		this.grid.height = "50%";
	}
});

Please let me know if this is the case or if you need further help with this.

Hristo