Multi-row gallery makes lightbox go outside viewport

JaffaKetchup commented 4 years ago

Please see the site at jbc.lnps.co.uk/gallery.html, and please respect my privacy/my client's privacy by not navigating elsewhere. It works best on computers, I am working on making it mobile friendly. Using Chrome on Windows. Not tested if issue occurs on mobile.

I am loading in images from a JSON file (the JS creates elements on the page), with a max of 3 images per row. This is my config:

lightbox.option({
    'resizeDuration': 250,
    'disableScrolling': true,
    'fitImagesInViewport': true
})

As you can see from the image below, the image goes off the screen. However, if I remove the second row, the issue does not occur.

Can you please explain what I may be doing wrong?

Thanks for a great JS library, looking forward to V3!

shaques commented 4 years ago

I have this problem as well. Is it something we're doing wrong?

lokesh commented 4 years ago

Closing out older issues.

Sorry I didn't get to this in time, but I haven't seen this issue in my local testing so I am assuming it related to the setup and was not a bug with the library itself. Possibly an issue w/the conflicting CSS on the page?

If this issue still persists for anyone, please post on https://stackoverflow.com/ with details about your scenario and I and others can help. Thanks.

titantwentyone commented 3 years ago

Closed issue but experienced the same issue. Ensuring you have the doctype in your html helped me:

<!DOCTYPE html>

This query at Stackoverflow shed some light on the issue.

lokesh / lightbox2

Multi-row gallery makes lightbox go outside viewport #676