Cannot make it work with Ionic

[samarthagarwal]

I have been trying to make it work with Ionic but the CSS classes are conflicting. It gets loaded but is not rendered.
Here is the code I am using.

<div class="list"> <div class="item item-image"> <ul rn-carousel class="image"> <li ng-repeat = "image in product.images"> <div class="layer"><img ng-src="{{image.src}}"/></div> </li> </ul> </div> </div>

[tobeee]

Did you ever solve this @samarthagarwal ?

[jbeuckm]

+1

[patrickhofer]

+1

[ablears]

I've got this working in Ionic. All I had to do was set a min-height on the parent UL.

ul[rn-carousel] { min-height:40rem }

[ladmerc]

Yeah had so also set a height property to get it work..

You could also overwrite the overflow:hidden css rule in your css file. That works too

[bennettstuart]

Using this in my project

<ul rn-carousel rn-carousel-buffered rn-carousel-index="vm.taskIndex" class="pane">
    <li ng-repeat="exercise in vm.session.exercises track by $index">
        {{exercise name}}
    </li>
</ul>

I think it may be rendering with height of 0px, so I added the ionic class "pane" which I think will make it fill the whole content.

[zaarheed]

The code for the carousel, as well as the images nested inside would appear in the source inspector but nothing was being rendered for me.

I fixed this by adding style="height:300px" to rn-carousel and it worked. Depending on how your CSS files are organised, I would recommend adding something like:
ul[rn-carousel] { height: 300px; }
to your stylesheet.

[lenin-anzen]

How can i make the height of the carousel "responsive"??