Fix for long dropdown submenus

[Ruslan-Aleev]

What does it do?

Add new system setting topmenu_subitems_max to be able to restrict the dropdown menu.
Sometimes a large number of installed packages prevent the normal use of the menu.

How it looks (set to 3):

Why is it needed?

Description from #11939

When there's a long Extras dropdown menu, and not enough screen space, the bottom items get cut off. It's not possible to scroll down or access them.

Related issue(s)/PR(s)

#11939
#14300

[JoshuaLuckers]

I'm not sure this is a practical solution. It adds more submenu's and it seems to me it still needs around the same amount of vertical space to show all items. Or is there something I'm overlooking? The "best" value to fix this issue is also very variable. E.g on my external screen a limit of 5 would fix the issue, but on my laptop it would still cause issues.

In 3.x the long dropdown submenu's appear to be scrollable (e.g the toggle language menu in the user menu). I think that's a more practical solution for the time being, what do you think?

[Ruslan-Aleev]

Yes, the setting will have to be changed on different screens, but it seems to me that this solution is better than none.

In 3.x the long dropdown submenu's appear to be scrollable (e.g the toggle language menu in the user menu). I think that's a more practical solution for the time being, what do you think?

There is also a problem on branch 3, it has not been resolved, there is a scroll only for choosing a language. The menu is made absolute (position: absolute), then the scroll cannot be added, if there are nested menu items, they will be cut off (through overflow).

[JoshuaLuckers]

Yes, the setting will have to be changed on different screens, but it seems to me that this solution is better than none.

Disabling the descriptions for the menu items makes the dropdown menu more compact. What if we check the available view height and automatically hide the descriptions after a certain threshold? E.g if the available view height is less than 300px, hide the descriptions?

There is also a problem on branch 3, it has not been resolved, there is a scroll only for choosing a language. The menu is made absolute (position: absolute), then the scroll cannot be added, if there are nested menu items, they will be cut off (through overflow).

Good to know!

[Ruslan-Aleev]

E.g if the available view height is less than 300px, hide the descriptions?

Yes, as an option. Although, if a lot of packages are installed, the problem can still arise.
p.s. We should see how other CMS menus are done :)

[JoshuaLuckers]

Yes, as an option. Although, if a lot of packages are installed, the problem can still arise. p.s. We should see how other CMS menus are done :)

Yes, I was looking at another CMS and that's how I came up with my solution. But they still suffer from the same issue. I think we can only mitigate it and not solve it for all use cases without major changes.

[muzzwood]

I wonder if it would be possible to have the menu appear as a double (or triple etc) column if the height is more than, say, 90% of the screen size. 🤔

[Bruno17]

I think the 'more' submenues should start from top, like it seems to be done in #14300

[Jako]

In #14300 the bottom of the 'more' submenu is aligned to the bottom of the parent menu. Thats the main difference between the screencast above and the older screencast and this has to be fixed here.

[Ruslan-Aleev]

The solutions in #14300 and this PR are practically identical. The difference is that I have not added an extra "More" lexicon. And added a drop-down menu for the "System" items (menu on the right).

[Jako]

If they are identical, why do the screencasts look different with the position of the submenu?

[Ruslan-Aleev]

Ahh, now I understand what you mean, I'll correct it later.
p.s. In general, it is logical to place the drop-down menu to the bottom of the parent menu, otherwise the height would be the same. I didn't think about it at the beginning :)

[Ruslan-Aleev]

Redid, now the dropdown looks like this:

[Jako]

Now it looks fine and does not grow to the bottom with each submenu.

[opengeek]

In the future, if a PR is ready for inclusion, please add a review with approval so that I know to look at it.

[SnowCreative]

There is also a problem on branch 3, it has not been resolved, there is a scroll only for choosing a language. The menu is made absolute (position: absolute), then the scroll cannot be added, if there are nested menu items, they will be cut off (through overflow).

If you put the dropdown inside a container that is position absolute or fixed and max height 100% (minus the height of the top menu bar), then whatever is inside the container will scroll as needed, adapting to the height of the window. I use this setup for mobile menus and it works well.

[Ruslan-Aleev]

If you put the dropdown inside a container that is position absolute or fixed and max height 100% (minus the height of the top menu bar), then whatever is inside the container will scroll as needed, adapting to the height of the window.

This won't work if the nested menu has more than 2 levels inside, unless I'm confused.

[SnowCreative]

This won't work if the nested menu has more than 2 levels inside, unless I'm confused.

Are there ever more than two levels?

[Ruslan-Aleev]

Here, the absolut position only works for the first nested menu, if there are sub-nested ones, then absolut breaks the menu:
#16041 (review)

[SnowCreative]

Here, the absolut position only works for the first nested menu, if there are sub-nested ones, then absolut breaks the menu

True, unless the nested menu is also in its own absolute container. It gets complicated.

[Jako]

Here, the absolut position only works for the first nested menu, if there are sub-nested ones, then absolut breaks the menu: #16041 (review)

The MODX3 menu has a different approach and works with Popper. The MODX2 Menu is CSS only if I am right.

[SnowCreative]

The MODX3 menu has a different approach and works with Popper.

Nice!

[Jako]

The MODX3 menu has a different approach and works with Popper.

Nice!

Only the first level, if I remember right. Because of this, the nested levels have a position + scroll issue.