Q-Scroll-Area Height

dylanreeve

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.

jaybo_nomad

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

bjbstone

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!

smakinson

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.

Shisiah

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>

Resistanc3

I mean yes is actually quite late for another answer… But i just signed in to say thanks to @dylanreeve for making my work evening much shorter… I just tried things like the past half hour…

No More Posting New Topics!

Q-Scroll-Area Height