ngx-gallery width and height options missing

Question

I'm wondering, how to give ngx-gallery (https://github.com/MurhafSousli/ngx-gallery) a new height. It has a fixed value of 500px and changing the parent divs height is not changing anything.

I was looking either for some attribute in the template like this

<gallery
   [height] = '250px'>
</gallery>

Stackblitz: https://stackblitz.com/edit/angular-osh1vu

Followup-question: In the Stackblitz, the behaviour is fit-height (regarding the black background) and in my application it is fit-width, so the black stripes are above and under the image. How can i change this too? (which was possible on older? version , but is no more a valid attribute)

or

some css code (looking in the dev tools, the sliding images are labeled div.g-template.g-item-template), which is also not possible to overwrite:

div.g-template.g-item-template {
  height: 200px !important;
}

are you putting this css code inside style.css rather than component css ? — mr. pc_coder, Jun 27 '20 at 16:54
i tried out both, it seems, there is some new instance of the css-box created and the smaller version is sliding to the left, out of the viewport — connectedMind, Jun 27 '20 at 17:04

score 1 · Accepted Answer · answered Jun 27 '20 at 17:08

1

Demo add class to galery element

<div class="basic-container">
    <h2>Gallery component</h2>
    <gallery class="custom"
    [items]="items"
    [dots]=true
    [thumb]=false
    [loop]=false
    [playerInterval] = 5000
    [autoPlay]=true
    [loadingStrategy]=preload>
  </gallery>
</div>

in css change

.custom{
height:200px;
}

answered Jun 27 '20 at 17:08

mr. pc_coder

16,412
3
32
54

yeah, looks like i didnt try out this simple possibility, gallery { height: 200px } is also working... should get more sleep :) – connectedMind Jun 29 '20 at 06:47

ngx-gallery width and height options missing

1 Answers1