Q-Scroll-Area Height

  • I’ve had various issues with trying to get a responsive Scroll Area.

    This post was helpful: https://forum.quasar-framework.org/topic/3756/best-practice-setting-up-q-scroll-area

    But it still wasn’t working for me, even when I had the flex columns working as intended.

    The key I found was needing to have an absolute height set on at least one parent element. What I ended up doing was attaching a Style-Fn to the q-page element…

    <q-page class="column" :style-fn="styleFn">

    And then a function that sets absolute height instead of the default min-height

    styleFn(offset, height) {
      let pageheight = height - offset;
      console.log("PageHeight: " + pageheight);
      return "height: " + pageheight + "px";

    After that I found that the scroll area sized properly simply by adding the col class.

    I posted this because it vexed me for ages and I couldn’t find a clear solution.

Log in to reply