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.

Sign up for GitHub

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

Jump to bottom

Bug: Broken Perfect Scrollbar on Checkbox click inside Accordion #243

Closed
daniel-sc opened this issue Dec 4, 2019 · 1 comment · Fixed by #248
Closed

Bug: Broken Perfect Scrollbar on Checkbox click inside Accordion #243

daniel-sc opened this issue Dec 4, 2019 · 1 comment · Fixed by #248
Labels
bug Something isn't working comp: core Issues related to @sbb-esta/angular-core prio3: medium Should be done when time available

Comments

@daniel-sc
Copy link
Contributor

Describe the bug
When using checkboxes (and radios?) in a accordion that is in a perfect scrollbar, in certain situations the scrollbar content is "shiftet" a little out of view - see gif:

crazy-scroll

To Reproduce

  1. Go to https://stackblitz.com/edit/angular-sbb-broken-perfect-scrollbar-on-checkbox
  2. Click on the second checkbox (test label2)
  3. Observe that the accordion has some negative offset to its container (the red border)

Expected behavior
The container should not be moved.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Windows
  • Browser Chrome (not reproducable with FF?)
  • Version 78.0.3904.108
@daniel-sc daniel-sc added the bug Something isn't working label Dec 4, 2019
@kyubisation
Copy link
Collaborator

I have also noticed problems with the perfect-scrollbar. I'm currently considering switching to native scrollbars for large areas, since scrollbar styling is now available for most modern browsers: https://css-tricks.com/the-current-state-of-styling-scrollbars/#article-header-id-0

@kyubisation kyubisation added the comp: core Issues related to @sbb-esta/angular-core label Dec 4, 2019
@kyubisation kyubisation added the prio3: medium Should be done when time available label Dec 4, 2019
daniel-sc added a commit to daniel-sc/sbb-angular that referenced this issue Dec 19, 2019
@daniel-sc
fix: assure hidden native input elements are positioned close to label
0988ff4 
This fixes bugs when used with perfect scrollbar, where Chrome auto scrolls to the native element that sometimes is placed in overflow area.

closes sbb-design-systems#243
@daniel-sc daniel-sc mentioned this issue Dec 19, 2019
Merged
kyubisation pushed a commit that referenced this issue Jan 6, 2020
@daniel-sc @kyubisation
fix: assure hidden native input elements are positioned close to label (
d5e43e9 
#248)

This fixes bugs when used with perfect scrollbar, where Chrome auto scrolls to the native element that sometimes is placed in overflow area.

closes #243
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working comp: core Issues related to @sbb-esta/angular-core prio3: medium Should be done when time available
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: assure hidden native input elements are positioned close to label daniel-sc/sbb-angular
2 participants
@daniel-sc @kyubisation