Scrolling in Q-Page-Container instead



  • Hi everyone,

    I am currently working on a website using quasar framework and have been trying to figure out how can I make the scrollable area within the Q-Page-Container instead of scrolling the entire page

    https://jsfiddle.net/tr52yg39/21/

    From this jsfiddle, you could see if I were to scroll down, the top left border radius will be gone and that is not what I wanted.

    I was hoping to scroll within the container instead so that the top left border radius would remain in that position



  • @raynorls Try this:

        <q-page-container class="bg-blue absolute-full">
          <div class="fit scroll">
            <router-view />
          </div>
        </q-page-container>
    


  • You could also replace that div with a q-scroll-area. Keep the fit class but the scroll class wouldn’t be needed anymore. Just depends if you want the fancy scrollbar and other features q-scroll-area provides.



  • @beets Thank you! This works perfectly. I did tried adding a <div class=“fit scroll”> previously, but now I know the problem lies on “absolute-full” in the q-page-container. Much thanks!


Log in to reply