Is MegaMenu responsive?

UI Components for React
Post Reply
chrishj
Posts: 229
Joined: 11 Jul 2011, 21:58
Location: England, Lancashire
Contact:

09 Nov 2022, 13:30

Hi

I am probably missing a setting but megamenu appears not responsive in PrimeReact.

If I change the screen size to 320x480 then only column 1 is shown. There is column 2 that is visible for 50% of the size and the remaining columns are missing.

Group 5 is disabled because if used then only Group 1 is shown.


Megamenu component

Code: Select all

<MegaMenu model={megaItems} orientation="horizontal" />
model

Code: Select all

const megaItems: any[] = [
		{
			label: 'Brands',
			items: [
				[
					{
						label: 'group 1',
						items: grp1,
					},
				],
				[
					{
						label: 'group 2',
						items: grp2,
					},
				],
				[
					{
						items: grp3,
					},
				],
				[
					{
						label: 'group 2',
						items: grp4,
					},
				],

				// [
				// 	{
				// 		//label: 'set 2',
				// 		items: grp5,
				// 	},
				// ],
			],
		},
		
		]
PrimeReact: 9.6.0
NextJs: 13.4.12
Theme Apollo v9.0
Database pg 8.8.0
react-hook-form: 7.38.0

Melloware
Posts: 3717
Joined: 22 Apr 2013, 15:48

13 Nov 2022, 14:43

It looks like MegaMenu is not responsive like the MenuBar is. You would have to request that as a feature on GitHub.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

JohnShafer
Posts: 1
Joined: 06 Dec 2022, 22:49

07 Dec 2022, 14:19

chrishj wrote:
09 Nov 2022, 13:30
Hi

I am probably missing a setting but megamenu appears not responsive in PrimeReact.

If I change the screen size to 320x480 then only column 1 is shown. There is column 2 that is visible for 50% of the size and the remaining columns are missing.

Group 5 is disabled because if used then only Group 1 is shown.


Megamenu component

Code: Select all

<MegaMenu model={megaItems} orientation="horizontal" />
model

Code: Select all

const megaItems: any[] = [
		{
			label: 'Brands',
			items: [
				[
					{
						label: 'group 1',
						items: grp1,
					},
				],
				[
					{
						label: 'group 2',
						items: grp2,
					},
				],
				[
					{
						items: grp3,
					},
				],
				[
					{
						label: 'group 2',
						items: grp4,
					},
				],

				// [
				// 	{
				// 		//label: 'set 2',
				// 		items: grp5,
				// 	},
				// ],
			],
		},
		
		]
No MegaMenu is not responsive at all. May be I only face this thing I can not say it that others also faced this as well. But for me MegaMenu is not responsive.

chrishj
Posts: 229
Joined: 11 Jul 2011, 21:58
Location: England, Lancashire
Contact:

08 Dec 2022, 09:46

Melloware wrote:
13 Nov 2022, 14:43
It looks like MegaMenu is not responsive like the MenuBar is. You would have to request that as a feature on GitHub.
This has been raised on GitHub [Issue link ][https://github.com/primefaces/primereact/issues/3633]
PrimeReact: 9.6.0
NextJs: 13.4.12
Theme Apollo v9.0
Database pg 8.8.0
react-hook-form: 7.38.0

habubey
Posts: 89
Joined: 24 Aug 2022, 13:17

08 Dec 2022, 15:45

Thank you for the opening the issue, we will look into it
Bugra Beyduz
PrimeReact Core Developer
Github profile: https://github.com/habubey

chrishj
Posts: 229
Joined: 11 Jul 2011, 21:58
Location: England, Lancashire
Contact:

24 Feb 2023, 10:02

Thanks for implementing the change. Great work. :D
PrimeReact: 9.6.0
NextJs: 13.4.12
Theme Apollo v9.0
Database pg 8.8.0
react-hook-form: 7.38.0

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 15 guests