Implementing a responsive Kendo UI Grid is a common use case in Angular applications.
If you have been looking for a way to set the height of Kendo UI grid to 100%, you may have come across this article in Kendo UI docs. It explains how to set the grid height to 100% to fill available height in the viewport to automatically resize the grid the viewport height changes.
It is pretty simple to implement in CSS:
.k-grid, my-app, body, html {
height: 100%;
}
Code language: CSS (css)This approach works fine when the only element you have on the page is the grid.
When the grid parent has another element, such as page title, the grid will overflow out of the parent due to 100% height not accounting for the height of the page title.
You could fix this issue by calculating the grid height dynamically. However, implementing dynamic height in CSS gets complicated quickly and there is a lot of overhead in handling window resize event in JavaScript.
A more sustainable approach is to implement CSS flexbox:
my-app, body, html {
height: 100%;
display:flex;
flex-direction: column;
}
.k-grid {
height: 200px; // minimum height
flex-grow: 1;
}Code language: CSS (css)CSS flexbox approach sets the grid height dynamically while accommodating sibling elements.
We’re still setting the height of all parent elements to 100%. However, this time we’re using flexbox to arrange parent elements in a column layout, ensuring that they occupy the full vertical space of the viewport.
The default height of the grid (k-grid) is set to a minimum of 200 pixels. This restricts the height of the grid to enable the inner scrollbar within the grid body.
flex-grow: 1 stretches the grid to fill remaining vertical space within its parent container.
By using CSS flexbox, we implement a responsive layout where the grid height adjusts automatically based on the available space within its parent container. This eliminates the need for complex JavaScript calculations or event handling, providing a cleaner and more maintainable solution.
