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.



  • THE ABOVE IS THE MOST IMPORTANT POST ON THE ENTIRE INTERNET!!! VEXED? I WAS WAY BEYOND VEXED! I WAS DAZED! CONFUSED! CONTEMPLATING A BITTER END TO THINGS! GOING OFF THE DEEP END! WINDING MY WAY THROUGH A LONG DARK TUNNEL! DROWNING IN A POOL OF MY OWN TEARS! AT THE END OF MY ROPE!

    thank you



  • I need this right now! Where do you define the variable for “height”? Are you getting the window height programmatically? Need help with how to do that!



  • Maybe helpful, maybe not 🙂 but I was facing a drawer with a q-scroll-area that was working and then it stopped working when I converted some content inside to use v-for, I was about to either just go with a div with overflow auto or look at calculating as mentioned above and then I added another div and it started working again. So I have a q-drawer with div.column, a couple div.col, then a div.col with the q-scroll-area using class=“fit” inside and at this point it was not working, then I added one more div (I used div-auto because of the design) and the scroll bar started working again.

    I did also just notice that if I check safari I had native scroll bars appearing on one of the parent divs ( I have not looked into which) so out of curiosity I changed the drawer to behavior=“mobile” and the q-scroll-area stopped working again. Sig, so I suppose its back to calculating and a bit of extra height somewhere must be what made it work again.


Log in to reply