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">
      .fullscreen
        overflow auto
    </style>
    

    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.