(Modal gallery) close button is hidden on mobile

[bogacg]

Modal gallery covers whole height on mobile, therefore user can't exit once in gallery.

[MurhafSousli]

Hi @bogacg, I have already fixed this, but I haven't push it to npm yet, a quick fix is to add this in your global style until the next update comes

.g-btn-close {
  z-index: 999;
}

[bogacg]

I didn't work. On mobile selected image is on the center and thumbanails are so on top, I don't even see space for a close-button..

Update

Ok I see where the problem is.

Because I use Bootstrap static top navbar, it covers g-btn-close-container

[MurhafSousli]

Can you paste your usage code and a screenshot?

…

On Mon, 8 May 2017 at 15:58, Bogac Guven ***@***.***> wrote: I didn't work. On mobile selected image is on the center and thumbanails are so on top, I don't even see space for a close-button.

[bogacg]

We've commented same moment, please see my update comment above.

Update

Still, I'm not sure if thumbnails need to be that much on top on mobile.

Height property is overwritten on mobile even if it's defined in gallery config.style as far as I understand. Maybe that can be left to users as optional.

Update 2
I've just remembered that whole content on my page is contained in a div (aptly named container) and has a negative top margin to fix things in regards static top navbar. So this fixed:

.g-btn-close-container {
  margin-top: 60px;
  z-index: 1200 !important;
}

It might also be a good idea to move modal component to body level upon initialization, it will be less infected by z-index that contains it (app component, or maybe route component, in my example its a lazy-loaded compoenent for example).

[MurhafSousli]

Height property is overwritten on mobile even if it's defined in gallery config.style as far as I understand. Maybe that can be left to users as optional.

@bogacg True, we are using ngStyle to customize the main parts of the gallery, and @media is not supported in ngStyle, so users will have to use the css with !important to force changing it at this time.

From my observation, I can tell that most mobile apps use a full height container for their image browser, that's why I adapted this style.

It is pretty difficult to find one solution that satisfy all.

It might also be a good idea to move modal component to body level upon initialization, it will be less infected by z-index that contains it (app component, or maybe route component, in my example its a lazy-loaded component for example).

Simply put <gallery-modal> on body level 🙂