Dynamic height problem

[AviFix]

Hi,

i ran in to a problem, with dynamic height.

i give the ul the following css:

ul { width: 100%; min-height:150px; max-height:550px; background-color:green; }

but the height is stock on 150px.

example: http://plnkr.co/edit/kefCFYLR8t7qfa4VUc2C?p=preview

Thanks alot

Avi

[Rakonda]

I got the same problem with the height

[omnibs]

Same problem here. Seems like it used to work in some older version before li tags were position: absolute.

[wesleyfsmith]

Yeah, same problem. Any one have an idea?

[inca]

Try adding a class on active slide (something like ng-class='{ active: $index == myIndexVariable }'); then add CSS ul[rn-carousel] > li.active { position: relative }.

[mariusc23]

Hi. I was able to get dynamic height working with the following additional styles:

ul[rn-carousel] {
  > li {
    position: relative;
    margin-left: -100%;

    &:first-child {
      margin-left: 0;
    }
  }
}

[tonyawad88]

Hi Marius @mariusc23 , Are you able to create a super brief plunkr showing how the height auto resizes ? Thank you

[mariusc23]

Hi @tonyawad88, Here's a plunk. Note how there is no fixed height set. The carousel is as tall as the longest slide.

[tonyawad88]

Thank you ! that works great !

[tonyawad88]

@mariusc23

[lookfirst]

@mariusc23 :+1: :smile:

[hughred22]

Still there is error. After using @mariusc23 method, the li is slight taller than the image at all time. If you set the li background as black, you can see the image is not filling up the vertical space. There is a black line in the button... How can I make the li / ul element exactly the same size as the image?

[mariusc23]

@hughred22 Try setting display: block on the images.

[badoet]

@mariusc23 thanks so much for the snippet! (: the patch works well for browsers that support the translate3d. for ie9, margin patch seems not enough.. its ok for the first swipe, the second swipe onwards, the margin-left fallback method that the library use seems to be off.

[idan666]

@mariusc23 Thanks!!! works great. as @badoet mentions, this doesn't work on IE9. Does anybody have a fix for IE?

i can't seem to find a solution... thanks!

[vinodhdk]

@mariusc23 works well !, adding "display:block" to the images did the trick on Motorola X (Android 6.0) !, suppose this will work on all android devices , will test it out . Thank you!