Slowboy Slowboy - 1 month ago 17
Ruby Question

CSS not working right when using Do Loop in bootstrap modal in rails app

I'm trying to make product images appear as a carousel in a

bootstrap modal
window.

As the code is now I'm only able to see the first image. At the moment there are three images for this product, uploaded with active admin.

I have tried
else
elsif
and
index ==1
for the
else
. I have also tried other modification of in the code below.

I'm kind of stuck, can anyone take a look at this and advise me?

** UPDATE see context in comments from @Lucas Costa**

the problem I'm experiencing seems to be because of the
CSS
, most probably the
.carousel-inner


Have anyone ever had similar problem?

<div class="container text-center">

<h1> Click Me </h1>
<!-- Large modal -->
<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Wrapper for slides -->
<% @product.photos.each_with_index do |photo, index| %>
<div class="carousel-inner">
<% if index == 0 %>
<div class="item active">
<%= image_tag(photo.image.url(:large), class: 'img-responsive') %>
</div>
<% elsif index == 1 %>
<div class="item">
<%= image_tag(photo.image.url(:large), class: 'img-responsive') %>
</div>
<% else index == 2%>
<div class="item">
<%= image_tag(photo.image.url(:large), class: 'img-responsive') %>
</div>
<% end %>
</div>
<% end %>



<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>

Answer

Ok, by looking at your code the problem seems to be in the first lines of the <!-- Wrapper for slides -->

you are writing it like

 <% @product.photos.each_with_index do |photo, index| %>
  <div class="carousel-inner">

but it should be

 <div class="carousel-inner">
  <% @product.photos.each_with_index do |photo, index| %>

Otherwise the loop is inserting .carousel-inner to every image and that breaks the Carousel.

Just switch those two lines and it should work. And remember to also switch the </div> and the <% end %> at the bottom.