Enable popper for the submenu too (opens on hover)

[Jako]

What does it do?

Apply Popper on subsubnav elements. Change the CSS to be used with Popper. The nav on System Settings is opened below of the entry on mobile. A CSS rule avoids the subsubnav to grow larger than the viewport. The subsubnav content is scrollable.

Why is it needed?

Fix a position out of the viewport for subsubnav elements. The use of Popper avoids the subsubnav be moved partly out of the viewport. Currently large subsubnavs are cut of at the bottom of the screen. Scrolling can be a future option for this (see #16041 (comment)).

How to test

Before: Reload the dashboard page with a viewport height of 700px. Open the 'manage' menu and look for the subnav of Reports. It is cut off on the bottom.
After: Run grunt build and do the same. The subnav of Reports is not cut off on the bottom.

Related issue(s)/PR(s)

#16029

The following desktop issues are fixed

Language before (subsubnav: 86vh):

Language after (subsubnav: 100vh - 12px):

Reports before:

Reports after:

Long extras before:

Long extras after:

The following mobile issues are fixed

Language Before:

Language After:

Long Extras Before:

Long Extras After:

System Settings Before:

System Settings After:

[smg6511]

Can you provide a couple screenshots showing the issue. I'm trying to replicate it (testing on Chrome) and can not get the menu to cut off (looking at a previous beta release). I feel like I've seen issues with the submenus before, but just can't seem to make it happen now.

[Jako]

Please look into the linked issue. If that's not enough, I can provide some extra examples.

[smg6511]

Sorry about that @Jako I thought I'd looked back at the issue, but had not (a second time, that is — I'd commented on the very issue you pointed me to!). Lot's going on ;-)

At any rate, would it be accurate to say it's an issue affecting certain browsers? I didn't see it on Chrome, but will take a look on Firefox and Safari.

[Jako]

I have added some screenshots to the PR description. The screenshots are created with Chrome. I don't think thats only affecting certain browsers.

[smg6511]

@Jako - Thanks for the images. You're right—it's all browsers. Whatever is causing the issue was introduced after beta-1. In the current 3.x repo I see the problems.

[Jako]

Maybe it was introduced with #15970

[Ruslan-Aleev]

If the level is greater than 2, then the menu does not work.

Here is the menu I created:

What it looks like:

[Jako]

@Ruslan-Aleev Thanks, that occured after setting overflow-y for all submenus. It can be solved like this: https://css-tricks.com/popping-hidden-overflow/, but the current CSS of the sub(sub)menus is annoying complicated and I need some time to prepare that later. I will reset the overflow only to the language list.

[Jako]

It works now. Long subsubnavs are currently not scrolling, but this issue was there before. It can't be fixed fast (see the comments above), but it is better than the current state.

[Ruslan-Aleev]

Thank you, works better than what we have now.
But in the future, we should think about something with overflow: hidden; and position: absolute;

[JoshuaLuckers]

There is a horizontal scroll in the language toggle, otherwise it works as described! Great work.

[Jako]

@JoshuaLuckers I can't reproduce this here in Chrome + Firefox. Did you resize the window before without reloading the page? The position of the user menu seems wrong too.

[JoshuaLuckers]

@Jako yeah I did resize the screen, the menu opens in the right position after refreshing the manager.
The horizontal scrollbar still appears.

If I remove the width from the #modx-footer .modx-subnav li a selector the horizontal scrollbar disappears.

P.s: I'm using Safari (desktop)

[Jako]

@JoshuaLuckers Thanks, Safari did indeed show the scrollbar. It is removed with the last change. Can anyone test this on Edge?

[JoshuaLuckers]

Chromium Edge? Or the "old" Edge?

[Jako]

The one I can't test because I am on a Mac.

[JoshuaLuckers]

@Ruslan-Aleev @Ibochkarev you guys use Windows right?

[Ruslan-Aleev]

you guys use Windows right?

@JoshuaLuckers Yes, I am using Windows OS.

[Jako]

Can you test this PR on Edge please?

[Ruslan-Aleev]

Can you test this PR on Edge please?

There are no extra scrolls, it works similarly to Google Chrome (in Edge Cromium is inside).