在 ipyvuetify 中创建可滚动布局答案

【问题标题】：creating scrollable layout in ipyvuetify在 ipyvuetify 中创建可滚动布局
【发布时间】：2021-01-22 05:22:17
【问题描述】：

我正在使用 ipyvuetify 库为我的 jupyter 笔记本创建一个不错的布局。我尝试创建一个受crahan/ipyfilechooser启发的文件选择器。

所以当文件夹内容太大时，我想创建一个可滚动列表：

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
        )
    ]
)

单独显示给我我需要的确切行为：文件夹选择器保持在顶部，我可以滚动项目

display(folder_select)
display(file_list)

但我需要将它们添加到单个小部件中以将它们用作独立的输入组件，因此我创建了一个布局：

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])
    ]
)

并且 max_heigth 参数不再受到尊重，所有布局都变得可滚动，而不仅仅是文件列表：

如果我尝试将它包含在更复杂的布局中，那就更糟了：

这是一个已知的错误吗？有没有办法在另一个布局中创建一个可滚动的布局？

【问题讨论】：

标签： python jupyter-notebook vuetify.js voila

【解决方案1】：

您需要设置样式overflow: auto 来隐藏溢出的内容并显示滚动条。

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

【讨论】：

你已经在github上回答了这个问题，不好意思我懒得在这里上传答案了。谢谢
我知道，没问题。我只是在这里回答，所以在这里找到问题的人也会看到答案。