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.



  • I came here looking for a solution but q-scroll-area didn’t work for me despite trying lots of variations with this component. So I removed q-scroll-area and implemented something like this:

    <div style="max-height: 440px; overflow: auto" class="col">
              <div :visible="false" class="fit column">
    		  <!-- stuff you put here will be scrollable. You can adjust the max-height depending on your components -->
    		 </div>
    		</div>
    

Log in to reply