reach/reach-ui

[dialog] Opening dialog overrides padding on the body element

Open

#610 建立於 2020年6月9日

在 GitHub 查看
 (7 留言) (1 反應) (0 負責人)TypeScript (558 fork)auto 404
Help WantedType: Enhancement

倉庫指標

Star
 (5,975 star)
PR 合併指標
 (PR 指標待抓取)

描述

🐛 Bug report

Current Behavior

When the dialog is open, react-remove-scroll via react-remove-scroll-bar, sets some css properties on the body. One of them is padding-top which is set to 0. We need to not do that for our page layout to not break.

We use a sticky masthead which the underlying content uses a padding top value on the body to not be obscured by the masthead.

When react-remove-scroll-bar removed the top padding, the top of the content is under the masthead and the bottom of the page jumps up.

https://share.getcloudapp.com/JruLNJ1j

Expected behavior

react-remove-scroll-bar does allow you to prevent or override some of these css properties. I should be able to pass dialog some control to prevent this from happening.

Suggested solution(s)

expose some react-remove-scroll-bar props to override the behavior.

Your environment

https://www.twilio.com/console/iot/supersim/network-access-profiles

貢獻者指南