No More Posting New Topics!

I have found the problem in 5 minutes (after posting)
“Tourner 7 fois sa langue dans sa bouche avant de parler” 🙄 😅

I had just to add a <div class=“column full-height”> directly under my q-card :

<!-- Forked from: https://quasar.dev/vue-components/dialog#Example--Maximized --> <div id="q-app"> <div class="q-pa-md q-gutter-sm"> <q-btn label="Maximized" color="primary" @click="dialog = true"></q-btn> <q-dialog v-model="dialog" persistent :maximized="maximizedToggle" transition-show="slide-up" transition-hide="slide-down" > <q-card class="bg-primary text-black full-height"> <div class="column full-height"> <q-bar> <q-space ></q-space> <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle"> <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">Minimize</q-tooltip> </q-btn> <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle"> <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">Maximize</q-tooltip> </q-btn> <q-btn dense flat icon="close" v-close-popup> <q-tooltip content-class="bg-white text-primary">Close</q-tooltip> </q-btn> </q-bar> <q-card-section class="col bg-white full-height"> <div class="column full-height"> <h2>Super Title</h2> <q-scroll-area class="col" visible > <p v-for="index in 21" :key="index"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore. </p> </q-scroll-area> </div> </div> </q-card-section> </q-card> </q-dialog> </div> </div>

https://youtu.be/dNsqUgfVF7Q
Requests remain in the status of “Pending”.

Hi,

Question: does the top part changes?

Some assumption first: you only want the item list to be scrollable and the rest of the UI to always be visible on screen.
If “no” then add it as part of the layout header (div slot="header").
If “yes” then it requires some thinking. You still need to add it to the header, but you also need to either use Vuex or a simple store of your own to sync what the layout should show based on the page the user is on.

This is just the high level design based on Vue’s own capabilities. Tell me if you need further information.

Aah, I like you are careful at details! The “scroll” CSS class only applies some CSS tweaks to make scrolling smooth on ALL platforms. But it doesn’t make the container scrollable. You have to add some additional CSS like overflow-y: auto besides setting that height and it will work.

EDIT: I’m talking wrong. scroll also adds overflow CSS to your container. So it should work as is!