How to properly size a VVirtualScroll within a VCol

[vargonis]

Hi there. Novice here, please bear with me! I've been struggling with a layout, and I've run out of ideas on how to solve my problem.

Here's my test code:

from trame.app import get_server
from trame.ui.vuetify3 import VAppLayout
from trame.widgets import vuetify3 as v3
from trame.widgets import code

import pyvista as pv
from pyvista.trame.ui import plotter_ui

server = get_server()
state = server.state
state.items = [{"name": f"Item {i}"} for i in range(100)]

plotter = pv.Plotter()
plotter.add_mesh(pv.Sphere())

with VAppLayout(server):
    with v3.VContainer(fluid=True, classes="fill-height pa-0 ma-0"):
        with v3.VRow(classes="fill-height"):
            with v3.VCol():
                with v3.VContainer(height="100%"):
                    editor = code.Editor(
                        v_model=("editor_content",),
                        options=("editor_options", {"automaticLayout": True, "minimap": {"enabled": False}}),
                        language=("editor_lang", "python"),
                        theme=("editor_theme", "vs-light"),
                    )
            with v3.VCol():
                with v3.VContainer(width="100%", height="70%"):
                    plotter_ui(plotter, mode="client")
                with v3.VVirtualScroll(items=("items",), height="200px"):
                    with v3.Template(v_slot_default="{item}"):
                        v3.VLabel("{{item.name}}")

server.start()

It produces the following result in my browser:

That's pretty close to what I want, except for the fact that I'd like the VVirtualScroll to take up all the remaining screen space. But if I put height="30%", everything overflows. I know very little about javascript and css, not to mention vuetify, but it looks as if the 30% refers to the height that the entire list would take (without scroll bar), as opposed to the actual screen height.

My question is: how can I make plotter_ui take 70% of the screen height, and VVirtualScroll the remaining 30%? Thanks a lot for your help!

PS: I don't know if my use of v3.Template is idiomatic. I struggled with it and it works, but I feel like I'm not doing it the trame way. I'd appreciate any comment on that, too, specially if I'm doing it in an unnecessarily contrived way.

[vargonis]

Oh, well, I had almost lost hope, but then found out that 30vh is what I want to put in there. This, alas, does not quite solve the problem, because I want to actually use a SinglePageLayout, as opposed to a VAppLayout. So, the code is this:

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vuetify3 as v3
from trame.widgets import code

import pyvista as pv
from pyvista.trame.ui import plotter_ui

server = get_server()
state = server.state
state.items = [{"name": f"Item {i}"} for i in range(100)]

plotter = pv.Plotter()
plotter.add_mesh(pv.Sphere())

with SinglePageLayout(server) as layout:
    with layout.content:
        with v3.VContainer(fluid=True, classes="fill-height pa-0 ma-0"):
            with v3.VRow(classes="fill-height"):
                with v3.VCol():
                    with v3.VContainer(height="100%"):
                        editor = code.Editor(
                            v_model=("editor_content",),
                            options=("editor_options", {"automaticLayout": True, "minimap": {"enabled": False}}),
                            language=("editor_lang", "python"),
                            theme=("editor_theme", "vs-light"),
                        )
                with v3.VCol():
                    with v3.VContainer(width="100%", height="70%"):
                        plotter_ui(plotter, mode="client")
                    with v3.VVirtualScroll(items=("items",), height="30vh"):
                        with v3.Template(v_slot_default="{item}"):
                            v3.VLabel("{{item.name}}")

server.start()

It produces the result below, which is almost right but note that the page has a scroll bar... I don't want it there, I just want the scroll bars of the virtual scroll and the code editor; there's no need for another, global scroll bar!

I'm hypothesizing that this happens because the 30vh refers to the size of layout.content as if it occupied the whole screen, but the layout.toolbar spoils the calculation.

[jourdain]

The vh unit in CSS correspond to View Height and like you said, it is off because of the toolbar. But you can do some calculation in css, like height: calc(70vh - 48px);

[vargonis]

That does it, thanks a lot! I had to put 96px instead of 48px. Is there a way to know dynamically what is the height of the toolbar?

[jourdain]

I think you have the toolbar size in a css var that you can use, It is just I don't remember it on top of my head. But if you inspect things in your browser dev tools you can find out.

[jourdain]

You can also use position: absolute and work within the defined space to do things with %. Either way, that does require some CSS understanding.

[vargonis]

Yes I think I will have to learn a bit more. Thank you very much! And also, many thanks for this amazing tool! I just wish it had more learning resources for novices (not that there aren't, I did watch a long video and clone the repo with tutorial examples), but I am amazed at the incredible things I can do without knowing anything about computer graphics and frontend development.