Collision detection for TieredMenu Submenus to keep them within viewport

[jonbarthol]

I'm submitting a ...

[X ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports) http://plnkr.co/edit/5tCyEPEk6Sv7kxmBdgyo?p=preview

Current behavior Sub menus in the p-tieredMenu component go off the screen on the right-hand side.

Expected behavior A sub menu should be positioned to the left of its parent menu if the sub menu won't fit on the screen.

See Plunkr case above.

[jonbarthol]

This is related to #593. @cagataycivici said he would create a new issue for the "subitem positioning" but I don't see a newly created issue for this.

[rdrrichards]

Any news on this? I am trying to use the TieredMenu on the far right side of my application, and the menu goes off the page. It would be nice to have the sub menus pop out to the left rather than the right in this situation.

[jonnomk]

Any updates on this? I also have a tiered menu on the right and it appears off screen.. With this issue and the issue where not using appendTo="body" on menu's makes the menu not anchored to the button (when using in positioned elements), I'm not having a great time right now.. I can see lots of people submitting these issues in search results and am surprised the problems still exist.

[jonnomk]

This still isn't fixed - why do we have to wait years for pretty major UI issues like this to be resolved?

[vitalist82]

We're having this issue with version 11.3.0. When approximately could we expect a fix please?

[jupin-r]

I have same problem and this behaviour is really strange. Position out of windows makes the menu totally useless.

[Kry-Vosa]

We too are having exactly this issue and would love to see a fix.

[ElementalSystems]

My products also work around this bug (not terribly well) with a difficult hack - when can we expect a fix.

[jonnomk]

Hello. Is this defect being looked at? I need to use the tiered menu on a pretty major part of our application where the menu is located on the right of the page.

[jupin-r]

Interesting think is that Contex menu component behaves properly and it doesn't have this Bug. Similar component, different behaviour. Maybe we could copy solution from context menu.

[ElementalSystems]

So I worked around it (awful hack) by figuring when I needed the menu to fold out leftwards (perhaps always in your case) and then forced the css like so for any p-tieredmenu with the class dropOutLeft in my global css:

.p-tieredmenu.dropOutLeft .p-menuitem-active>p-tieredmenusub>.p-submenu-list {
  width: 200px!important;
  left: -100%!important;
}

It ain't pretty and won't be strong enough for some of the folk with complicated scrolling situations on this issue but will workkfor jupin-r and maybe some others?

[AlexKaramushko]

PrimeNG 11

#yourMenuId .p-submenu-list {
  right: 100%;
  left: unset;
}

[jonnomk]

Unfortunately, this is still an issue - when can we expect a fix? I'd handle re-positioning myself, but no events are emitted when menu items are shown, so pretty stuck on this one..

Please make it work like the Material Angular ones work:

Material

PrimeNG

[jonnomk]

@cetincakiroglu - should this issue be labelled as a defect and not an enhancement because the tiered menu doesn't work as expected? It'd be great to get this working as expected with collision detection both in parent and child menus.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[Enlumis]

The submenus wont fit on screen even with appendTo="body"

[hannahscoot]

Hi this still is occurring in the latest component for the Tiered Menu. Would be good to get an actual fix for collision detection like Context Menus do.

[moohkooh]

Hi this still is occurring in the latest component for the Tiered Menu. Would be good to get an actual fix for collision detection like Context Menus does.

it's a little bit annoying, I have a similar issue with the normal p-menu, it's going outside the screen. On Angular-Material the Overlay CDK make a pretty good jop here.