How can I recover Vuetify2 behavior for SinglePageWithDrawerLayout in Vuetify3

[adhamrait]

Hello! we've been upgrading to Vuetify3 for our app that is built on SinglePageWithDrawerLayout.

In Vuetify2 the header and sidebar would not scroll when you scrolled the main content. Here is the code

from trame.ui.vuetify2 import SinglePageWithDrawerLayout
from trame.widgets import vuetify2 as vuetify, html
from trame.app import get_server

server = get_server(client_type="vue2")

# GUI layout
def gui_setup():
   with SinglePageWithDrawerLayout(server) as layout:
       layout.title.set_text("Title here")
       with layout.toolbar:
           vuetify.VSpacer()
           html.P("More text here")
       with layout.content:
           with vuetify.VContainer():
               for i in range(100):
                 html.P(f"Line {i}")
       with layout.drawer:
           html.P("drawer item")


if __name__ == "__main__":
   gui_setup()
   server.start()

And here's the video where you can see the header/sidebar aren't scrolled:

Vuetify2.demo.mov

However since upgrading to Vuetify3 in trame we are seeing the sidebar/header scroll when you try and scroll the main content:

from trame.ui.vuetify3 import SinglePageWithDrawerLayout
from trame.widgets import vuetify3 as vuetify, html
from trame.app import get_server

server = get_server(client_type="vue3")

# GUI layout
def gui_setup():
    with SinglePageWithDrawerLayout(server) as layout:
        layout.title.set_text("Title here")
        with layout.toolbar:
            vuetify.VSpacer()
            html.P("More text here")
        with layout.content:
            with vuetify.VContainer():
                for i in range(100):
                  html.P(f"Line {i}")
        with layout.drawer:
            html.P("drawer item")


if __name__ == "__main__":
    gui_setup()
    server.start()

Vuetify3.demo.mov

How can I prevent the sidebar/header from scrolling?

[jourdain]

https://vuetifyjs.com/en/getting-started/upgrade-guide/

It seems that you need to set full_height=True in your layout instance. Also you may need some full-height classes. Ideally you should test and validate the given style using their playground.

[adhamrait]

From fiddling with the playground , I found that putting a style="height: 100vh; overflow-y: auto" onto the content fixes this!

from trame.ui.vuetify3 import SinglePageWithDrawerLayout
from trame.widgets import vuetify3 as vuetify, html
from trame.app import get_server

server = get_server(client_type="vue3")

def gui_setup():
    with SinglePageWithDrawerLayout(server, full_height=True) as layout:
        layout.title.set_text("Title here")
        with layout.toolbar:
            vuetify.VSpacer()
            html.P("More text here")
        with layout.content:
            with vuetify.VContainer(style="height: 100vh; overflow-y: auto"):
                for i in range(100):
                    html.P(f"Line {i}")
        with layout.drawer:
            html.P("drawer item")

if __name__ == "__main__":
    gui_setup()
    server.start()