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

Filter group problems with server side rendering non-JS fallbacks #232

Open
ediblecode opened this issue Sep 28, 2021 · 1 comment
Open
Labels
bug filters Filter group, options etc v1 Version 1

Comments

@ediblecode
Copy link
Contributor

Filter groups are missing their padding when JavaScript doesn't load:

image

And the collapseByDefault option for filter groups works with JS enabled/loaded. However, is JavaScript doesn't load, then it still collapses but can never be expanded so those checkboxes are unusable:

image

There are a few ways we could solve the second issue:

  • only honour collapseByDefault client-side e.g. after componentDidMount or useEffect, but this will cause a layout shift
  • use anchors from the group to the options, and use :target in CSS to expand the group
  • use a details element
@ediblecode ediblecode added bug v1 Version 1 labels Sep 28, 2021
@ediblecode
Copy link
Contributor Author

Picked up by @lizaadebowale in testing for the guidance/advice list

@ediblecode ediblecode added the filters Filter group, options etc label Sep 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug filters Filter group, options etc v1 Version 1
Projects
None yet
Development

No branches or pull requests

1 participant