p-overflow-hidden CSS class behavior

[VicTMPDeV]

Discussed in https://github.com/orgs/primefaces/discussions/2395

^{Originally posted by VicTMPDeV July 25, 2024}
Hi everyone. I'm doing an Angular project, using primeNG components. I have a problem using the DynamicDialog component. When opening those dialogs, it causes scrollbar shift, that is something bad for UX and SEO.

According to official documentation, there is a solution on simple Dialog component, using the blockScroll property. In my case I'm using the DynamicDialog component, wich has a modal property that suppose to provides the same behavior, to block the background, but it doesn't work in my case and scrollbar stills scrolling when I force to show overwritting the .p-overflow-hidden CSS class with the value { overflow: auto }

I have search on issues and, according to these two issues:

primefaces/primevue#882

primefaces/primeng#13732

Is something schedduled on the roadmap? I have found nothing about that, and I am experiencing the same issues than in referenced issues above...

I'm using this versioning:

• Angular version 18.1.1 right now (previously 17 and 16 versions also had this behavior)
• Primeng version 17.18.5

Actually I have implemented the classic:

html, body { scrollbar-gutter: stable; }

and also tried this another one

html, body { overflow-x: clip; }

p-overflow-hidden { overflow: auto }

but it seems to work, but not, because loses scroll position and I don't know exactly why it works with the overflow-x: clip... it scares me...

This is not the best solution by the way, but it's the less bad.