CurrentImage height

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Support request

Current behavior

Hi.

Great module! I would like to ask you something since I’m not able to find it in the docs.

As I understand from: angular-modal-gallery/libs/angular-modal-gallery/src/components/current-image/current-image.scss -> $curr-img-max-height: 60vh; the current height of the image inside the modal is 60% of the screen height.

Since my images are quite stretched vertically I would prefer this value to be about 80. Otherwise, the image become quite small. Is there any way to configure it?

If not, would be possible to override it in my component? I’ve tried overriding #current-image in my component’s .css but unfortunately this trick didn’t work.

Expected behavior

It would be nice to be able to control this value from configuration. or If possible, add to documentation how to override it.

Minimal reproduction of the problem with instructions

My official live example on StackBlitz (based on https://stackblitz.com/edit/angular-modal-gallery-v5) is:

What is the motivation / use case for changing the behavior?

I’m currently using this module

Environment (the most important section to fill very carefully)

- Node version: 8.2.1  
- npm version: 5.3.0  
- Operating System and version:  Windows 10
- Angular version: 5.2.9 
- angular-cli version (or SystemJS/Webpack): 1.6.2 
- I'm using Server Side Rendering with angular-universal: NO
- I'm compiling with mode: DEBUG



Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Others:

[Ks89]

I schedule this issue to investigate and try to find a way to add an input param to choose this value.

[Ks89]

I tried and it’s working.

I added this to my main styles.scss

#current-image {
  max-height: 80vh !important;
  max-width: 80vh !important;
  height: auto !important;
}

Obviously change values as you prefer. However, be careful on IE11 and Edge. If you want to support all browsers, test all of them, also resizing the window both vertically and horizontally.