No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to prevent scrolling on layout page-container?

    Help
    3
    31
    4886
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • CWoodman
      CWoodman last edited by CWoodman

      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!

      1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel last edited by

        Usually some margins set to components cause the scrollbar.

        https://quasar.dev/layout/layout#Usage

        1 Reply Last reply Reply Quote 0
        • CWoodman
          CWoodman last edited by

          Thanks I’ll check for that.

          1 Reply Last reply Reply Quote 0
          • CWoodman
            CWoodman last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • dobbel
              dobbel last edited by

              without a working example on https://codepen.io I don’t think I can help you.

              CWoodman 2 Replies Last reply Reply Quote 0
              • CWoodman
                CWoodman @dobbel last edited by

                @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).

                1 Reply Last reply Reply Quote 0
                • CWoodman
                  CWoodman @dobbel last edited by

                  @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…

                  dobbel 1 Reply Last reply Reply Quote 0
                  • dobbel
                    dobbel @CWoodman last edited by dobbel

                    @CWoodman

                    It did not like the Quasar.version in the js block. So i removed it.

                    https://codepen.io/ontwikkelfabriek/pen/yLOyyGN?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Fvue-components%2Ftable

                    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.

                    CWoodman 1 Reply Last reply Reply Quote 0
                    • CWoodman
                      CWoodman @dobbel last edited by

                      @dobbel I don’t understand why the tabs aren’t working. Should be two tabs side by side, with two tab panels.

                      dobbel 1 Reply Last reply Reply Quote 0
                      • dobbel
                        dobbel @CWoodman last edited by

                        @CWoodman can you fix that in the codepen?

                        CWoodman 1 Reply Last reply Reply Quote 0
                        • CWoodman
                          CWoodman @dobbel last edited by CWoodman

                          @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.

                          dobbel 1 Reply Last reply Reply Quote 0
                          • dobbel
                            dobbel @CWoodman last edited by

                            @CWoodman I have locally deployed the code and the tabs are now next to each other.

                            CWoodman 1 Reply Last reply Reply Quote 0
                            • CWoodman
                              CWoodman @dobbel last edited by

                              @dobbel Good. Same for me.
                              Do you see the scrolling issue?

                              dobbel 1 Reply Last reply Reply Quote 0
                              • dobbel
                                dobbel @CWoodman last edited by

                                @CWoodman

                                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-builder

                                I fixed the right scrolling

                                <q-layout view="hHh LpR fFf">     
                                
                                

                                see the capital ‘R’ instead of ‘r’

                                dobbel 1 Reply Last reply Reply Quote 1
                                • dobbel
                                  dobbel @dobbel last edited by dobbel

                                  @CWoodman

                                  for you second problem of the tabstrip going off screen I can come up with 2 solutions:

                                  1. https://quasar.dev/layout/page-sticky#Example--Expanded (probably what you want)

                                  2. put the tabs inside the q-header.

                                  CWoodman 1 Reply Last reply Reply Quote 0
                                  • CWoodman
                                    CWoodman @dobbel last edited by

                                    @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?

                                    dobbel 1 Reply Last reply Reply Quote 0
                                    • dobbel
                                      dobbel @CWoodman last edited by dobbel

                                      @CWoodman I suggest to use the page-sticky.

                                      Sure paste it. 😉

                                      but really inspect the layout builder, it explains a lot.

                                      CWoodman 1 Reply Last reply Reply Quote 0
                                      • CWoodman
                                        CWoodman @dobbel last edited by

                                        @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>
                                        
                                        
                                        1 Reply Last reply Reply Quote 0
                                        • dobbel
                                          dobbel last edited by dobbel

                                          @CWoodman

                                          The value of the view property 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

                                          CWoodman 1 Reply Last reply Reply Quote 1
                                          • CWoodman
                                            CWoodman @dobbel last edited by

                                            @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!

                                            dobbel 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post