How to prevent scrolling on layout page-container?
-
I’m using q-layout with a header and 2 drawers. The main page container has a tab-bar, and each tab panel should take care of its own scrolling. But on a small screen, a scrollbar appears that will scroll the tab-bar off screen. I don’t want this scrollbar at all - only the tab-panel content should be able to scroll.
Actually, it seems to be the whole layout that is scrolling, even though I put style=“overflow: hidden” on q-layout. I really don’t want this! -
Usually some margins set to components cause the scrollbar.
-
Thanks I’ll check for that.
-
Removed any margin settings, but still getting scrollbar which causes the layout main center section to scroll my tabstrip off the top. Right drawer also scrolls up even though it doesn’t need to to show content. Left drawer stays put - probably because I added a scroll-area to it.
Because I have two drawers and a main section with tabstrip, I don’t want ANY automatic scrolling - just scroll things that need it like a table, or a scroll-area I set up. -
without a working example on https://codepen.io I don’t think I can help you.
-
@dobbel It’s too big and complex to make a codepen. I guess my basic question is this: Is there a way to prevent scrolling in q-layout and provide it only within components where it’s desired (i.e. with q-scroll-area).
-
@dobbel Tried to make a codepen with a basic layout to show the problem, but it’s not working for some reason. Just copied the code from a working example in VScode, so not sure what the problem is. Any help would be appreciated, because this simple example shows the problem I need to solve.
codepen… -
It did not like the
Quasar.versionin the js block. So i removed it.I don’t see any scroll weirdness( I do see weird tabs on the main page). You can expand on my working codepen if you like or explain what you thing should happen.
-
@dobbel I don’t understand why the tabs aren’t working. Should be two tabs side by side, with two tab panels.
-
@CWoodman can you fix that in the codepen?
-
@dobbel Dont’ understand why tabs not working - code is straight out of the Quasar docs. Anyway, it does show the scrolling issue - if the window is not tall enough to show the content of the tab panel, I get a scrollbar on the far right which scrolls the tabstrip off screen (as well as the right drawer, which otherwise would have it’s own scrollbar.
What’s needed is to be able to scroll the content of the tabpanel - the tabstrip should ALWAYS be visible.
-
@CWoodman I have locally deployed the code and the tabs are now next to each other.
-
@dobbel Good. Same for me.
Do you see the scrolling issue? -
yes I see and understand. You have 2 issues for the first:
You have to take a look at ( and see the difference ) :
https://quasar.dev/layout-builderI fixed the right scrolling
<q-layout view="hHh LpR fFf">see the capital ‘R’ instead of ‘r’
-
for you second problem of the tabstrip going off screen I can come up with 2 solutions:
-
https://quasar.dev/layout/page-sticky#Example--Expanded (probably what you want)
-
put the tabs inside the q-header.
-
-
@dobbel Whew! Getting frustrated. I changed the layout view as suggesed, and put the tabs in a q-toolbar in a q-header, but now they’re not clickable. And when I scroll, the tabs get covered by the page content. (and the right drawer still scrolls!)
Wish we could make it work on the codepen. Can I just paste my code here?
-
@CWoodman I suggest to use the page-sticky.
Sure paste it.
but really inspect the layout builder, it explains a lot.
-
@dobbel OK here it is…
<template> <q-layout view="hHh Lpr lFr"> <q-header> <q-toolbar> <q-btn flat dense round icon="menu" aria-label="Menu" @click="leftDrawerOpen = !leftDrawerOpen" /> <q-toolbar-title> Scroll Test </q-toolbar-title> <div>Quasar v{{ $q.version }}</div> <q-space /> <q-btn flat dense round icon="menu" aria-label="Menu" @click="rightDrawerOpen = !rightDrawerOpen" /> </q-toolbar> </q-header> <q-drawer v-model="leftDrawerOpen" show-if-above bordered content-class="bg-grey-1" > <q-list> <q-item v-for="x in 15" :key="x"> Left Item {{ x }} </q-item> </q-list> </q-drawer> <q-page-container> <q-page-sticky expand position="top"> <q-header> <q-toolbar> <q-tabs v-model="tab" align="left" shrink stretch> <q-tab name="tab1" label="Tab 1" /> <q-tab name="tab2" label="Tab 2" /> </q-tabs> </q-toolbar> </q-header> </q-page-sticky> <q-page padding style="padding-top: 66px"> <q-tab-panels v-model="tab"> <q-tab-panel name="tab1"> <p> Set window height smaller than drawers, and individual drawer scrollbars appear correctly. </p> <p> But click TAB 2 and scrollbar appears on far right, which scrolls both the tabstrip off screen, AND the right drawer. </p> <p> How can this be changed to avoid this far right scrollbar, and scroll only the tabpanel, not the entire window? </p> <q-list> <q-item v-for="x in 20" :key="x"> Tab two content item {{ x }} </q-item> </q-list> </q-tab-panel> <q-tab-panel name="tab2"> <p> How can this be changed to avoid this far right scrollbar, and scroll only the tabpanel, not the entire window? </p> <q-list> <q-item v-for="x in 20" :key="x"> Tab two content item {{ x }} </q-item> </q-list> </q-tab-panel> </q-tab-panels> </q-page> </q-page-container> <q-drawer side="right" v-model="rightDrawerOpen" show-if-above bordered content-class="bg-blue-1" > <q-list> <q-item v-for="x in 15" :key="x"> Right Item {{ x }} </q-item> </q-list> </q-drawer> </q-layout> </template> <script> export default { name: 'MainLayout', data () { return { leftDrawerOpen: false, rightDrawerOpen: false, tab: 'tab1' } } } </script> -
The value of the
viewproperty of q-layout is not the same as my suggestion:<q-layout view="hHh LpR fFf">you have:
<q-layout view="hHh Lpr lFf">see the capital ‘R’ instead of ‘r’ , that’s the cause of the scrolling right drawer
-
@dobbel Right. Sorry, I have two windows open and changed the wrong one. So that prevents the right drawer from scrolling unnecessarily. Now how about the tabs? BTW I really appreciate your help with this - it’s been bugging me for awhile!
