Menu
Trying to get cdk-virtual-scroll-viewport height to be equal to page height.
<div class="plServiceItemsList-list">
<cdk-virtual-scroll-viewport class="plServiceItemsList-listViewPort" itemSize="20">
When trying to use height 100%, I see no list
.plServiceItemsList-listViewPort {
height: 100%;
min-height: 100%;
}
The only way it will be displayed is specifying a height:
.plServiceItemsList-listViewPort {
height: 100px;
}
But this is not dynamic.
527
A simple way to solve this is to use the viewport percentage unit vh instead of %. One vh is defined as being equal to 1% of a viewport's height. As such, if you want to specify that something is 100% of the latter, use " height: 100vh ". Or if you want to make it half the height of the viewport, say " height: 50vh ".
[itemSize] dictates how tall in pixels each row in the list is. The virtual scroller then uses this (in part) to determine how many rows it can buffer above and below the viewport. The less tall you make the itemSize , the more it will try to load and buffer.
Loading hundreds of elements can be slow in any browser; virtual scrolling enables a performant way to simulate all items being rendered by making the height of the container element the same as the height of total number of elements to be rendered, and then only rendering the items in view.
After @Chellappan suggested using vh, I thought my issue was solved, but actually, when the page size what bigger than the screen, it failed.
This is what I used:
.plServiceItemsList-listContainer {
display: flex;
flex-direction: column;
min-height: 100%;
}
.plServiceItemsList-listViewPort {
flex-grow: 1;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With