I'm facing a challenge with the following issue:
I am working with angular 8 and utilizing tieredMenu from primeng 8.
The problem arises when I have a scroll, causing the tieredMenu's submenu to be hidden.
Do you have any suggestions on how to solve this?
This is the HTML file snippet:
<div class="app-scroll-perso">
<div class="scroll-width-perso">
<p-tieredMenu [model]="items"></p-tieredMenu>
</div>
</div>
TypeScript File Section:
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'File',
icon: 'pi pi-fw pi-pencil'
},
{
label: 'encouragement',
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 style for applying the scroll effect:
.scroll-width-perso {
max-height: 20vh;
overflow-y: scroll;
overflow-x: hidden;
width: 180px;
}
Here is an example of what has been implemented so far: