Scroll Area with toolbar above changes scroll-area scroll height



  • 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!



  • @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


Log in to reply