My KTMenus are being rendered off-screen. Workaround?
Our site uses KTMenus extensively and for the most part work just fine.
Ran into an issue today, though, where certain ones weren't functioning. I got to the bottom of that issue. It was due to that part of the page loading asynchronously. The fix was to add this after rendering the section:
KTComponents.init();
Now the menus are firing! But...different problem now.
The popper styling is setting the X position of the submenu way off screen:
z-index: 107; position: fixed; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-1280px, 392px, 0px);
For reference, if I modify that manually via devtools, this is what it should be to render in the correct spot:
translate3d(-380px, 50px, 0px);
Other KTmenus on the page (rendered prior) get positioned just fine, though.
What is the workaround for this (if there is one)?
Replies (2)
I figured out the problem.
KTMenu uses Popper.js to handle the positioning of the pop-up.
Popper.js is not compatible with using newer CSS @containers.
Popper.js wants to calculate the positioning of the pop-up based on the element clicked on's position within the viewport. However, when using a css container, one needs to calculate the position within the the container itself.
This is fixable with additional JS that repositions the menu after the fact. Hacky, but works. At some point, it looks like Keen may need to upgrade their dependency on popper.js
Hi,
Noted, thank you for the feedback.
We are releasing(v3.0.7 pending approval) a new version of Keen with the latest popper plugin version.
Hopefully, it fixes the above issue.
Regards.
