search

trvswgnr / bs5-lightbox

A pure JS lightbox gallery plugin for Bootstrap 5 based on the Modal and Carousel components
https://trvswgnr.github.io/bs5-lightbox/
MIT License
125 stars 28 forks source link

Lightbox full screen option cutting off content at the top #65

Open garryknapper opened 1 year ago

garryknapper commented 1 year ago

Hi, I'm using the full screen option on your bs5-lightbox module to display some HTML content but it's cutting off at the top. Example here (click on 'view plant list' button half way down the page): http://fermionx.britwebtest.co.uk/electronic-contract-manufacturing/pcba/

The green border is the modal-body class provided by Bootstrap 5 and is the right height. The red border is the lightbox-carousel class from the bs5-lightbox module and is a child of modal-body. This is causing the sizing problem.

On further investigation, I can see that's it's positioned absolutely with a top 50% and left 50% and using CSS translate to move it up and left 50% back to the edge of the browser. This is done with the bootstrap utility classes translate-middle, top-50 and start-50. Removing these classes actually resolves the problem as the positioning reverts to the default top 0 and left 0.

I don't really want to modify the module directly as my changes will be overwritten if/when it gets updated so could you please apply this fix to the module or suggest an alternative solution or explanation as to why this problem is occurring? I look forward to your reply, thank you.

timvandijck commented 1 year ago

Not really the solution for your problem, but just wanted to let you know that you can safely "modify" the module with patch-package (https://www.npmjs.com/package/patch-package). You can just modify the things you need, run the patch-package command for this package and it will create a patch file in your own repo. Then you can run patch-package in a postinstall hook and it will always try to apply the patch.

This should unblock you for now.

Alternatively you can fork the repo, make the change you described and then create a pull request.

garryknapper commented 1 year ago

Thanks for the advice, I managed to resolve this using patch package.

valii2334 commented 11 months ago

@garryknapper can you please share how you solved the problem? I have a vertical image and is both cut at the top and scrollable 😞

garryknapper commented 11 months ago

@valii2334 I modified the module with patch package as described by @timvandijck. Look for the element with a class of lightbox-carousel and remove these classes from that element: translate-middle, top-50, start-50. That should resolve the sizing problem and remove the scrolling as well as fixing the top being cut off.