Open Mani-Santhosh opened 4 months ago
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
currently i am developing an application.
No response
16.2.0
17.18.5
Angular CLI App
TypeScript
20.13.1
all the browser
Steps to reproduce:
Expected behavior:
Any update on this?
Please update on this issue
same here. for 4 columns its working fine. with 5 not!
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:
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: