Stuck on an issue?
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 jumps position when the viewport is resized
See original GitHub issueDemo: https://jsfiddle.net/techdavid/g89ts0rs/2/
When the viewport is adjusted, the modal gets a margin applied to it, making it jump position slightly to the left (once only).
For the problem to occur, the main page content needs to overflow but not the modal. _adjustDialog() should be called when the modal opens initially so that this doesn’t occur.
Issue Analytics
- State:
- Created 6 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
How to scroll the page when a modal dialog is longer than the ...
This works no matter the height or width of the page or modal dialog, allows scrolling no matter where your mouse/finger is, doesn't...
Read more >Content Jumping (and How To Avoid It) | CSS-Tricks
The downside is that they only work when you set dimensions explicitly; min- properties and content-derived layout changes won't transition.
Read more >Making Perfectly Sized, Centered, Scrollable Modals - Medium
The trick is to give up on setting the height based on the height of the modal and to instead use vh to...
Read more >How to center and keep focus on Modal image using mobile
It seems to me that the only solution is to use some JS when the modal is called and automatically set the scrollbar...
Read more >Bootstrap Modal Position - Visual LightBox
- Modals usage position:fixed , that can possibly sometimes be a little bit particular regarding to its rendering. Any time it is possible,...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Not exactly… it’s the padding-right applied, but there’s no scrollbar involved. Here’s a video: https://www.useloom.com/share/efa1bc8aa6ce4215807bbeb830b0aa9c
@Johann-S if you resize the view of the html output in the bottom right corner, after clicking the modal, it does hop left a little.