Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

p-radioButton causes layout issues when used inside an overflow: auto div (all elements with p-hidden-accessible?) #10718

Closed
kartheininger opened this issue Oct 7, 2021 · 1 comment
Assignees
Labels
LTS-FIXED-10.1.4 Fixed in PrimeNG LTS 10.1.4 LTS-FIXED-11.4.7 Fixed in PrimeNG LTS 11.4.7 Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@kartheininger
Copy link

kartheininger commented Oct 7, 2021

I'm submitting a ... (check one with "x")

[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)
https://stackblitz.com/edit/github-aszejq?file=src/app/app.component.html

Current behavior
When the radioButton is used in a div with overflow:auto and requires scrolling in the div to make the radioButton visible, extra space is added at the bottom of the page. When the radioButton is clicked, the page jumps.

Its exactly the same issue like #9725
and it is NOT only the radioButton, I guess its nearly every element which has a "p-hidden-accessible"-element. We had it with a listbox, with a checkbox, with a radioButton, ...
Our workaround is/was to do the same like in fbb4969 in a global css, but it looks like it should be fixed in the primeng code or? At least it was now partially fixed with #9725

Expected behavior
No extra space, and page should not scroll on interaction with the radioButton.

Minimal reproduction of the problem with instructions
See demo

What is the motivation / use case for changing the behavior?
RadioButton does not work if using overflow: auto to create scrollable panels.

  • Angular version: 12.2.9

  • PrimeNG version: 12.2.0 (but older had the same problem)

  • Browser: Chrome 94| Firefox 93

  • Language: TypeScript 4.0.2

@yigitfindikli yigitfindikli added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Oct 7, 2021
@yigitfindikli yigitfindikli self-assigned this Oct 7, 2021
@yigitfindikli yigitfindikli added this to the 12.2.1 milestone Oct 7, 2021
@kartheininger
Copy link
Author

Hi @yigitfindikli ,
I do not know but perhaps it was missed --> I guess that problem does NOT only occur for checkboxes/radiobuttons, but also for other elements which internally render a p-hidden-accessible-element. For example the listbox also has the problem like described. I guess (we do not have the usecase) that e.g. a dropdown/autocomplete is behaving exactly the same. Should I prepare a stackblitz for all elements? ;)

@yigitfindikli yigitfindikli added LTS-FIXED-11.4.7 Fixed in PrimeNG LTS 11.4.7 LTS-FIXED-10.1.4 Fixed in PrimeNG LTS 10.1.4 and removed LTS-PORTABLE labels Oct 18, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
LTS-FIXED-10.1.4 Fixed in PrimeNG LTS 10.1.4 LTS-FIXED-11.4.7 Fixed in PrimeNG LTS 11.4.7 Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

2 participants