[Popover] [Dialog] Body's padding gets removed when open in modal mode

[xavier-kairn]

Bug report

Current Behavior

When the body has some top padding, opening a Popover or a Dialog makes the body jump up.

This is also the case with left-padding.

Popover closed:

Popover opened:

Expected behavior

That the body stays in place 😊

Reproducible example

https://codesandbox.io/s/vigilant-bird-1fj6og?file=/src/App.tsx

Suggested solution

From my exploration, the problem comes from react-remove-scroll-bar, that is used by react-remove-scroll to remove the scrollbars in modal mode. I was not sure exactly where/how to post this issue so I came here. In my case, being able to pass removeScrollBar={false} to RemoveScroll here solves my issue. (equivalent line adding RemoveScroll in 0.1.6 actually)

Therefore I guess allowing to pass parameters to RemoveScroll would solve my issue.

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	Popover, Dialog	0.1.6, 0.1.7
React	n/a	17.0.2
Browser	Brave, Safari Chrome
Assistive tech
Node	n/a	v16.12.0
npm/yarn	yarn	v1.22.17
Operating System

I think the problem is also there in 1.0.0 looking at the code but I haven't checked.

Cheers 🎉

[andy-hook]

Hey @xavier-kairn , the easiest way to handle this is to provide layout level padding to a wrapper element rather than using body

https://codesandbox.io/s/elegant-fast-i52wp6?file=/src/styles.css

alternatively you could simply provide values with a higher specificity if you really need to.

As to the whys of this behaviour, it would be better to ask in that project specifically. We don't get many reports of this being a problem because in practical terms folks rarely apply layout styles to the body, it's generally preferred to zero them at that level.

Hope this helps, let me know if you have other questions!

[xavier-kairn]

Thanks for the swift reply @andy-hook! Indeed, in our own app we do avoid the body padding 😊

However, I am working on a Chrome extension right now, and hence I do not have control over how other websites handle this. For example, Stackoverflow uses a padding-top on their body for their top nav bar. Which means the whole body jumps up when the popover I inject gets opened. My apologies, I should have mentioned that from the start.

Would you still recommend me going and asking on react-remove-scroll-bar as to why this behaviour? I can absolutely do that. I came here because the removeScrollbar={false} option is a perfect solution for me 😊

[andy-hook]

Oh I see, yes that makes the use case much clearer. Ideally the library would maintain the original styles while adding the missing scrollbar width but I’m sure there is complexity in measurement and other considerations, I’d recommend opening an issue there as the author will be able to provide more context on the implementation.



Feel free to link back to this issue as well.

I guess non-modal isn't an option because the locked scroll is a requirement for you?

[xavier-kairn]

Thanks! I'll go open an issue over there then 😊

Yes, non-modal is for now not an option, but I'll also go negotiate that with our designer, maybe I can convince him that we don't really need to lock the scroll for a Chrome extension, excellent point! 👍 Thanks for the quick replies again, very much appreciated!