VL does not have any scrolling per se – what you are seeing is the AppLayout’s content area trying to accommodate its contents by showing a scrollbar, but the VL’s 100% height make that not work very well.
The reason why e.g. buttons and text fields don’t squash together vertically like the Grid does is that they have a specific height built into them (they are essentially fixed-height components), while the Grid does not (as it can be any height).
The situation is actually made worse by setting 100% height on the VL and Grid, because that makes them shrink to fit their respective containers.
If you remove the height on the VL (let it be auto), it will grow to accommodate its contents.
If you then also remove the height on the Grid, it will be some arbitrary default height. If you want it to be some specific height, e.g. in pixels, you should set it to that.
As mentioned (waaay) above, you can use a Scroller to create a custom scrolling area. (Note that the content you put into a Scroller should never have percentage height, because you can’t have it both ways – scroll within the container and stretch to fit the container)
I was wondering what is the use of sizeUndefined and looks that is what needed here right ?
As you said, Removing height of both VL and Grid fixed the issue
setSizeUndefined is exactly used for such cases where you wanna clean up those added styles
setSizeUndefined is not helping here. It is still getting sizefull
how do I remove the height from code? I did it in developer tools and it worked but the same I couldn’t do from code because I do not see any method to remove height
Sorry. I was wrong. sizeUndefined worked.