p-megaMenu : Column Display Issue

[Mani-Santhosh]

Describe the bug

I am currently using PrimeNG 17.18.5. In the MegaMenu, when I add 5, 7, 8, 9, or 10 columns, each column is assigned a value of 12 (col-12), making them not visible on the screen. Additionally, I am unable to add a scroller to see the columns.

<div ng-reflect-ng-class="p-megamenu-col-12" class="p-megamenu-col-12">

this.items = [ { label: 'Furniture', icon: 'pi pi-box', items: [ [ { label: 'Living Room', items: [ { label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }, ], }, ], [ { label: 'Living Room', items: [ { label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }, ], }, ], [ { label: 'Kitchen', items: [ { label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }, ], }, { label: 'Bathroom', items: [{ label: 'Accessories' }], }, ], [ { label: 'Living Room', items: [ { label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }, ], }, ], [ { label: 'Bedroom', items: [ { label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }, ], }, ], [ { label: 'Office', items: [ { label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }, ], }, ], [ { label: 'Office', items: [ { label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }, ], }, ], ] } ];

I have added a screenshot for your reference and provided the StackBlitz link here.

https://stackblitz.com/edit/2sjxx3?file=src%2Fapp%2Fmega-menu-basic-demo.ts

Environment

currently i am developing an application.

Reproducer

No response

Angular version

16.2.0

PrimeNG version

17.18.5

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.13.1

Browser(s)

all the browser

Steps to reproduce the behavior

Steps to reproduce:

1. Add the MegaMenu component.
2. Add more than 5 columns for a single header, or use my sample payload.
3. See the display in the browser.

this.items = [ { label: 'Furniture', icon: 'pi pi-box', items: [ [ { label: 'Living Room', items: [ { label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }, ], }, ], [ { label: 'Living Room', items: [ { label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }, ], }, ], [ { label: 'Kitchen', items: [ { label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }, ], }, { label: 'Bathroom', items: [{ label: 'Accessories' }], }, ], [ { label: 'Living Room', items: [ { label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }, ], }, ], [ { label: 'Bedroom', items: [ { label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }, ], }, ], [ { label: 'Office', items: [ { label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }, ], }, ], [ { label: 'Office', items: [ { label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }, ], }, ], ] } ];

Expected behavior

Expected behavior:

• When the number of columns is increased, a scroller should be added to the p-megamenu-panel.
• The MegaMenu should be displayed within the screen without overflowing the application view.

[Mani-Santhosh]

Any update on this?

[Mani-Santhosh]

Please update on this issue

[jonasesser]

same here. for 4 columns its working fine. with 5 not!

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation and try the latest PrimeNG version(v19). If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding! Best Regards,

[maartenderie]

This persists in primevue v4 (4.3.4)

Quick workaround; add a column so there's six columns. Don't go beyond six columns.