Content shifting when opening and closing lightbox
See original GitHub issueDue to this recent commit: https://github.com/jossmac/react-scrolllock/commit/99f54ed9e8e04611e0d981d733affc8aa7c204f1
The defaultProps prop is being defined incorrectly and therefore
if (this.props.preventContentJumping) {
will evaluate to undefined/false and content will shift instead of defaulting to not shifting.
Issue Analytics
- State:
- Created 6 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Fixed elements are "moving" when lightbox is triggered #195
Because the "body" is set to have overflow: hidden when the lightbox is opened, fixed elements, like menu for example are moving.
Read more >Lightbox shifts the page - html - Stack Overflow
I have implemented a lightbox into my website. It's working great except for the fact, that when the lightbox is opened, It shifts...
Read more >Lightbox Moves Website 11px to Right - Forum | Webflow
When opening the lightbox it seems that the background content is moved 11px to the right. It looks like its jumping from right...
Read more >side of page shifting with a lightbox - WordPress.org
hello, ive been having a weird shift of the page issue with a plugin called “fancybox for wordpress” when opening an image on...
Read more >Lightboxing from a Scrolling Panel
If the panel is scrolled down when the lightbox opens, then the panel in slide a (in the background) stays where it is,...
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 FreeTop 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
Top GitHub Comments
OK - I had a container div with a percentage width
<div style={{ width: '96%' }}>
and the disappearance and reappearance of the scroll bar was breaking the layout. I changed thewidth: '96%'
towidth: '96vw'
and the layout stays intact. Passing this along in case it helps someone.I have this same issue. Layout in react-photo-gallery looks great on load (I am also using a Lightbox). Clicking on an image opens the Lightbox and I can see the layout through the overlay still looking nice. Then I close the Lightbox and the scroll bar breaks the layout and the images wrap to the next row. If I reopen the Lightbox, the layout in react-photo-gallery looks normal again.