Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[Modal] Vertically centered modal cutoff on mobile
See original GitHub issue🐛 Bug report
On mobile devices vertically centered modals get cutoff at the top. This happens for modals that are bigger than the screen.
💥 Steps to reproduce
Open a modal on mobile that is vertically centered and higher than the screen.
💻 Link to reproduction
https://chakra-ui.com/docs/overlay/modal
🧭 Possible Solution
I believe this is not solvable with the current structure. I could fix it with making the modal container display: block; and adding one div element between the container and the modal content with min-height: 100%; display: flex; align-items: center; justify-content: center;.
This needs to be tested for other modal types.
🌍 System information
| Software | Version(s) |
|---|---|
| Chakra UI | v1.0.3 |
Issue Analytics
- State:
- Created 3 years ago
- Reactions:5
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I think this issue should be fixed. I’m currently using margin=“auto” on modal content block as a workaround. @segunadebayo
Following my explanation in the PR.