TieredMenu Submenus do not display within viewport

[shawnss]

Describe the bug

When tiered menu is on the far right side of page the submenus do not automatically display on the left. This was working correctly in Prime NG version 15 (https://stackblitz.com/edit/a2runv?file=src%2Fapp%2Fdemo%2Ftiered-menu-popup-demo.html).

Environment

Windows

Reproducer

https://stackblitz.com/edit/oje4xw?file=src%2Fapp%2Fdemo%2Ftiered-menu-popup-demo.html

Angular version

16.x

PrimeNG version

16.x

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.14.2

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[stity]

Related issue : #12541

[shawnss]

This was working in version 15!
https://stackblitz.com/edit/a2runv?file=package.json

[TaylorHo]

Hi @shawnss! I was facing the same issue, so I tried some CSS changes, based on the CSS of the component here on GitHub.
As shown here, on the CSS file of TieredMenu, there's a class called .p-submenu-list-flipped that flips the side of the submenu.

Even trying, I couldn't easily apply this to my project, so I implemented the same rule of the CSS code (left: -100%;) on my component, and it solved the issue.

I think that the issue needs to be resolved, but this can be used as a workaround now.

If someone tries to fix it, this CSS class is a good starting point to solve this issue.

Thanks!

[AliHamrouni]

Salut @shawnss comment vous avez résolut le problème, la class que vous avez implimentez s.v.p

[TaylorHo]

Hey @AliHamrouni, in my case, I have added globally the following CSS style:

.p-tieredmenu .p-submenu-list {
  left: -100%;
}

It works fine as a temporary troubleshooting since this CSS inverts the side where the submenu appears.

[AliHamrouni]

merci !! @shawnss

[WienemannCC]

We are experiencing the same problem. This should be fixed, the workaround is just that.