Menu Displays Submenus Outside Viewport on Mobile

[yanmariomenev]

Description

When the Menu is rendered near the viewport edge, submenus extend beyond the visible area. Clicking "More Items" and selecting "Schedule Closed" causes the submenu to appear on the right instead of adjusting to stay within the viewport. The issue does not occur for the "Change" menu.

Now when testing in Firefox the above behavior isn't present on the landscape mobile view, but if you set the vertical mobile view the initial menu popup will not render in the correct position.

Steps To Reproduce

1. Use the link: https://angular-kz6kjvvb-mgeimojs.stackblitz.io/ - editor example
2. Open Developer Tools, go to the Device Toolbar, select "iPad Mini" or set the resolution to 1024x768, and switch to landscape mode.
3. Click on the "More Items" menu at the end, then click on the "Schedule Closed" menu. The submenu will exceed the viewport.

This also applies to Firefox, but for the wrong menu position you have to set the mobile view to vertical.

Screenshots or video

Chrome interaction:

https://github.com/user-attachments/assets/1cfc3a34-ae88-4b83-8eda-bfe6fffbbf8f

Firefox interaction:

https://github.com/user-attachments/assets/28360f39-a986-4599-adad-de6c4b1ac8cb

Browser

Chrome

Browser version

latest

OS type

MacOS

[binoypatel]

Any update on this issue? Our app is badly affected and not usable for our end users. Any ETA would be highly appreciated.

Thanks, Binoy

[dtopalov]

Hello @binoypatel,

I really understand the negative effect the issue might have in certain application scenarios and usage, and how frustrating this might be for end users. We apologize for the caused inconvenience.

That being said, the issue is still not a part of our immediate planning. We will update the issue accordingly when there is a fix available in both develop and official version of the Kendo UI for Angular Menu package.