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