CurrentImage height

[dt-83]

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]

Hi.
I decided to use 80 to fully support all browsers (in particular Ie11). It was a good value to prevent issues, so I don't recommend to change it if you want to support also edge and ie11. However, it should be possibile to change it. I'll check this evening because I don't have my laptop right now :)

[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.

[dt-83]

Hi,

It works for me too.
Thanks.

It sucks though that it only works in the main style file.
I prefer to keep styles related to a particular component in the local component .css

[Ks89]

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

[tobi-or-not-tobi]

@dt-83 if you like to add that config in your component css you should either turn of viewEncapsulation for the component or use the /deep/ structure in your component css.

[javasmaster]

@Ks89 Guys, sorry but I couldn't find the zooming for desktop functionality, how can I zoom the pictures? The size is too small, it's better to have an ability for zooming, thanks

[Ks89]

@javasmaster I don't understand, please could you post a screenshot of your application with the "small" image?