search

MurhafSousli / ngx-gallery

Angular Gallery, Carousel and Lightbox
https://ngx-gallery.netlify.app/
MIT License
609 stars 129 forks source link

Size of g-box-template #568

Closed bcwhite-code closed 1 year ago

bcwhite-code commented 1 year ago

I'm a bit of a novice at CSS so apologies if I simply don't understand something.

The g-box-template class is defined as such:

.g-box-template {
    position: absolute;
    z-index: 10;
}

This leaves it with a completely dynamic size and so trying to position things relative to the full size of the lightbox (e.g. right:0) won't work.

Should it have width:100%;height:100%; to make it cover the full display?

MurhafSousli commented 1 year ago

The idea is to display what you place in the box, but covering full display would block any click event on the item, and would block swiping. so it is better to leave for the user to decide.

bcwhite-code commented 1 year ago

I tried adding "width:100%;height:100%" to g-box-template and was still able to interact (with mouse and keyboard -- I didn't try a touch-display) with the lightbox as before.

I've placed my buttons at the top-left so it's not an issue for me but I don't see how I would place things anywhere else without that class being full size.