creating scrollable layout in ipyvuetify

Question

I'm using the ipyvuetify lib to create a nice voila layout for my jupyter notebook. I try to create a file selector inspired by crahan/ipyfilechooser.

so when the folder content is too big I want to create a scrollable list :

folder_select = v.Select(items=get_parent_path('/home/prambaud'), label='folder', v_model='/home/prambaud')
file_list = v.List(
    dense=True, 
    color='grey lighten-4', 
    max_height='300px',
    flat=True,
    children=[
        v.ListItemGroup(
            active_class="border",
            children=get_items('/home/prambaud/'),
            v_model=None
        )
    ]
)

displaying the separately give me the exact behaviour I need : the folder selector stays on top and I can scroll in the items

display(folder_select)
display(file_list)

But I need to add them in a single widget to use them as a standalone input component so I created a layout :

file_input = v.Layout(
    v_model=None,
    row=True,
    class_='pa-5',
    align_center=True,
    style_='300px',
    children=[
        v.Flex(xs12=True, children=[folder_select]),
        v.Flex(xs12=True, children=[file_list])
    ]
)

and max_heigth parameter is not respected any more and all the layout become scrollable instead of just the file list :

it's even worse if i try to include it in a more complex layout :

Is it a known bug ? Is there a way to create a scrollable Layout inside another Layout ?

Answer 1

You will need to set the style overflow: auto to hide the overflowing content and show a scrollbar.

...
max_height='300px',
style_='overflow: auto',
...