Can you wrap a full page with q-scroll-area?

[b0ot]

I need to have the scrollbar visible on desktop and mobile for my application as there are certain elements that don't respond to touch (by design).

I was hoping I could simply wrap the entire page with a q-scroll-area that is always visible, however since you need specify a fixed height/width this seems impossible unless you manually calculate the heights of all elements on the page.

Is there any other solution?

[suleimanas]

one way is to use CSS Positioning Classes

<q-page class="relative-position">

<q-scroll-area class="absolute-full">

[b0ot]

This solution almost worked for me!
For whatever reason when I go to a narrow view, the spacing gets odd.

On desktop without the q-page / q-scroll area:
(Everything is centered)

When I use the q-page / q-scroll area:

The spacing gets messed up.

[suleimanas]

you need to wrap it inside another div so you can center it correctly: q-page>q-scroll-area>div>your_page
maybe if you can make a codepen I can help you with it

[metalsadman]

rough example https://codepen.io/metalsadman/pen/YzEoWNa

[suleimanas]

perfect example

[b0ot]

Is there a way for a component to take as much space as needed up to a specified height and then turn into a scroll-area?

[marvin-wtt]

This worked best for me:

// MainLayout.vue
  <q-layout>
    <!-- q-header -->

    <q-scroll-area style="width: 100vw; height: 100vh">
      <div style="max-width: 100vw">
        <q-page-container>
          <router-view />
        </q-page-container>
      </div>
    </q-scroll-area>
    
   </q-layout>