Scrollable content in q-layout with fullscreen class?

  • In order to have smooth transitions (slide-in on new route), I have my content wrapped in a <q-layout class=“fullscreen”>. Without that, the content of that layout only displays after the transition animation finished.

    On the other hand, my content page overflows, so I need a scrolling container. That I only achieve without haveing the fullscreen class on q-layout. In order to solve this, I set .fullscreen overflow to auto on the affected page:

    <style lang="stylus">
        overflow auto

    Am I doing it wrong? Is this a use case where a view prop should be used instead? Do I need to add a slot prop to the main content? It’s a bit hard to follow the documentation there.

  • Imho your solution is the most elegant, and should have no unwanted/unpredictable side-effects if you add scoped to your style tag.

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.