Best practice setting up q-scroll-area

dsl101

I’m really struggling to get q-scroll-area to work reliably, and I’m sure I’m Doing It Wrong. The pattern I’ve been using is something like this:

<template>
  <q-scroll-area class="fill-window">
    <div>
      <!-- Stuff here -->
    </div>
  </q-scroll-area>
</template>

<style scoped lang="stylus">
  .fill-window
    height calc(100vh - 160px)
</style>

This works, but (a) I’m hand tuning that offset (160px) to cater for the vertical position this component is rendered within the main layout, and (b) when I add something ‘optional’ to the component like this:

<template>
  <q-scroll-area class="fill-window">
    <div v-if="showControls">
      <!-- Controls here -->
    </div>
    <div>
      <!-- Stuff here -->
    </div>
  </q-scroll-area>
</template>

The value of 160px now depends on whether the parent passed true or false to showControls.

So, is there a better way to say “give as much height as possible without triggering the browsers own scrollbar”?

dsl101

I made a codesandbox to illustrate the problem: https://codesandbox.io/embed/codesandbox-app-5g21z

I would like the content in MyView to expand to fill the available space. That includes accounting for the variable sized controls on the parent view, which at the moment is done with a q-page-sticky (click the button to change its size), but I realise that will probably have to change. The 2 tabs show how not using any q-scroll-area means the entire page scrolls, and using a q-scroll-area with specific height ends up with cumbersome computed style="..." attributes.

I suspect the main page will have to become a flex-column, but that’s a lot of refactoring in my app, and I wanted to be sure that was the right way to go and that I wasn’t missing something easy inside MyView.

dsl101

I know this is old now, and Quasar has moved on quite a bit too, but @eduardodgarciac on the Discord channel pointed me in the right direction. Actually, trying to use QScrollArea inside a QDialog, and fill the space in the dialog with variable sized content, scrolling if necessary. The key is to use flex column, and set the QScrollArea to class="col". Final result can be seen here: https://codepen.io/dsl101/pen/jOOJNXK

Hope it helps someone!

dylanreeve

@dsl101 Thanks for this. It was useful. I still had issues with the scroll area in a page. I found that I needed to have a absolute height specified in a parent element.

Details here: https://forum.quasar-framework.org/topic/5315/q-scroll-area-height

garlicbread

I came up against this problem recently, this thread seems to pop up on the top of the google results when searching for it

then I discovered these links

First in the body tag I disabled the page scroll

<body style="overflow: hidden;">

Next as an example for the q-scroll-area

    <q-page-container>
      <q-page class="row no-wrap">

        <div class="col q-ma-md">
          <div class="column full-height">
            <q-scroll-area class="col q-pa-sm" visible>

              <router-view />

            </q-scroll-area>
          </div>
        </div>

      </q-page>
    </q-page-container>

ghada

@garlicbread thanks you , you saved my life!!

No More Posting New Topics!

Best practice setting up q-scroll-area