I am facing an issue where the submenu gets cut off when I add a scroll to the main menu, and I'm struggling to make the submenus appear above the scroll. Any assistance would be highly appreciated.
Here is a simple code snippet: https://stackblitz.com/edit/angular-cyvv7d
Any guidance on how to resolve this problem?
To provide more context, below are the HTML code:
<div class="scroll-width-perso">
<p-tieredMenu [model]="items"></p-tieredMenu>
</div>
CSS styling:
.app-scroll-perso {
max-height: 30vh;
overflow-y: auto;
overflow-x: hidden;
width: 250px;
}
and TypeScript implementation:
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'
}
];
}
}