Skip to content

react-remove-scroll is shifting my fixed header every time a radix select is opened #1586

Answered by benoitgrelard
jtabone16 asked this question in Help
Discussion options

You must be logged in to vote

Hi @jtabone16,

This is due to how react-remove-scroll handles the scrollbar removal technique.
When you have fixed elements, you have do add some additional classes to those elements to avoid them shifting.

We have to do it to our sidenav in our own docs for the same reason:

https://github.com/radix-ui/website/blob/8c5a605f07879131e0f7a7e3fd777bb3604672d1/pages/docs/design-system/overview/%5Bslug%5D.tsx#L34-L41

Replies: 7 comments 13 replies

Comment options

You must be logged in to vote
9 replies
@jtabone16
Comment options

@benoitgrelard
Comment options

@jtabone16
Comment options

@benoitgrelard
Comment options

@seanssel
Comment options

Answer selected by benoitgrelard
Comment options

You must be logged in to vote
1 reply
@hedysnike
Comment options

Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
2 replies
@firxworx
Comment options

@ThePiyushAggarwal
Comment options

Comment options

You must be logged in to vote
1 reply
@brianlovin
Comment options

Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
None yet