Я пытаюсь получить прокручиваемое меню с подменю.Я использовал tieredMenu
из primeng версии 8 и angular 8. Проблема в том, что подменю скрыто или обрезано, когда я переключаю прокрутку в главное меню.
Вот что у меня есть простой код:https://stackblitz.com/edit/angular-cyvv7d
Для справки: HTML:
<div class="scroll-width-perso">
<p-tieredMenu [model]="items"></p-tieredMenu>
</div>
</div>
и css:
.app-scroll-perso {
max-height: 30vh;
overflow-y: auto;
overflow-x: hidden;
width: 250px;
}
и файл TypeScript:
import { Component } from '@angular/core';
import {MenuItem} from 'primeng/api';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
title = 'test menu with scroll';
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'File',
icon: 'pi pi-fw pi-pencil',
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: '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'
}
];
}
}
ОсновнойМеню имеют фиксированную высоту.Я должен добавить свиток.И подменю скрыто при добавлении прокрутки.Как решить эту проблему?