Scroll Area with toolbar above changes scroll-area scroll height

[murrah]

Hi. I am trying to make a vertical scrolling “panel” that fits inside another component and is responsive to both height and width. It almost works, but …

Here is my pen: https://codepen.io/flowt-au/pen/zYBarrZ

If I remove the toolbar and have a 100% height on #myPanel it works perfectly.

If I include the toolbar and have 100% height on #myPanel the scroll-area scrolling does not reveal the last items because the height is now below the bottom of the window by the height of the toolbar.

How to have a responsive height scroll-area with a toolbar above it? Any ideas?

Thanks!

[dobbel]

@murrah

The q-toolbar does not compensate for it’s own height ( something like that). But the q-header does. So the easiest solution is to wrap a toolbar in a q-header( and move it outside of the q-page and q-page-container):

https://codepen.io/ontwikkelfabriek/pen/bGejGoM

[murrah]

Thanks so much for your help - that’s much better. Sorry for the slow reply - for some reason I missed the notification.