Carousel height should expand as the content grows

[samaxes]

Updating angular-carousel to the last version has broken our applications.

This is due to its positioning which has changed from position: relative to position: absolute making all carousels invisible (with an effective height of 0).

Forcing a height on them works but since all the carousels have different heights it does not scale well.

Is it possible to revert it to position: relative or is there a workaround for this issue?

[revolunet]

sorry for this. will try to get relative position working for li's.

[samaxes]

Thanks Julien for the quick reply.

[iamjager]

As a workaround, you can use position: relative with :nth-of-type(n) { left: -100% * (n - 1); } css rule for now. Not ideal, but anyway — it works.

[revolunet]

i don't really get the problem, could be cool to have a sample plunker

[jeffchienzabinet]

iamjager, what do you mean? Where should I put position: relative?

[javiercf]

if someone is still wondering about this

ul[rn-carousel] > li:nth-of-type(n){ 
   left: -100% * (n - 1); 
   position: relative; 
}

[samaxes]

This issue is duplicated by #245. Both issues are about the change in the CSS property position in the 0.3.x branch.

[bladetogo]

Did someone else try the workaround ?

The property left: -100% * (n - 1); doesn't seem to be valid on Chrome, or did I miss something? I've also tried left: calc(-100% * (n - 1)); with no better result.

[olliekav]

I'm pretty sure that is LESS/SCSS if you are just trying to use it in normal css?

I managed to get around this for now by adding the following to ul[rn-carousel]

ul[rn-carousel] {
height: 100%;
min-height: 100%;
}

That works for me on android/iOS.

[paynecodes]

Variable height boxes are a problem. @olliekav's solution will work if your ul[rn-carousel] is in a fixed height container. Not sure what @javiercf's solution is as it's not supported in Sass.

[olliekav]

Mine is actually working in variable height containers, which is strange. I'll have another look over it and make sure I haven't made any other changes.

[paynecodes]

@olliekav Hmm. I suspect that there is some explicit height or position magic your doing that allows for this.

@revolunet A plunkr might be nice, but until then, just remove the explicit height you've got set on the demos.

[javiercf]

yeap, I had to edit the css file directly, but it doesn't work as I thought, demo, it offsets the image so there is a blank between images

[saiichihashimoto]

This is an issue for us as well; however, we have a hack that works.

We attached a directive to the

and a directive onto each of the div/img (in our case, fieldset) that takes up the whole
• . Use the require: "^..." syntax. Then, on the "child" directive, pass to the "parent" div (however you feel like, we put it into an array corresponding to the pages) element.context.clientHeight. That's the height of the element. Using ngStyle on the
  and you've got access to the height you want.

[cgwyllie]

+1 this is an issue for me, would prefer to not have to specify explicit heights on the containers.

[pmcalmeida]

By setting the first li to position relative, it works, but it's not an ideal solution. It would be nice to have the slider working without a fixed height.

ul[rn-carousel] > li:first-child { position: relative; }