html - 主菜单有滚动条时如何显示子菜单？

Question

我正在为这个问题而苦苦挣扎:

我正在使用 primeng 8 中的 angular 8 和 tieredMenu。

我的问题是当我滚动时隐藏了 tieredMenu 的子菜单

如何解决？

这是 HTML 文件:

<div class="app-scroll-perso">
  <div class="scroll-width-perso">
    <p-tieredMenu [model]="items"></p-tieredMenu>
  </div>
</div>

typescript 文件:

items: MenuItem[];

ngOnInit() {
    this.items = [
        {
            label: 'File',
            icon: 'pi pi-fw pi-pencil'
        },
        {
            label: 'encouragment',
            icon: 'pi pi-briefcase'
        },
        {
            label: 'primeng',
            icon: 'pi pi-save'
        },
        {
            label: 'contact',
            icon: 'pi pi-cloud-upload'
        },
        {
            label: 'Edit',
            icon: 'pi pi-tags'
        },
        {
            label: 'user',
            icon: 'pi pi-user',
            items: [
                {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                {label: 'Refresh', icon: 'pi pi-fw pi-refresh'},
                {label: 'save', icon: 'pi pi-fw pi-refresh'},
                {label: 'modify', icon: 'pi pi-fw pi-refresh'},
                {label: 'nothing', icon: 'pi pi-fw pi-refresh'}
            ]
        },
        {
            label: 'blog',
            icon: 'pi pi-fw pi-pencil'
        }
    ];
}

应用滚动的CSS:

.scroll-width-perso {
  max-height: 20vh;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 180px;
}

您可以在下面找到我到目前为止所做的示例:

https://stackblitz.com/edit/angular-3kxful

Answer 1

尝试指定溢出:在css中可见

.scroll-width-perso {
max-height: 0vh;
overflow-y: visible;
overflow-x: visible;
width: 180px;
}