0

I have a partial to display a carousel of images within a card. Problem is my carousel is not clean and slides outside the card. Anybody faced this issue and would help me to solve it please ?

Here is the link to a screencast : https://streamable.com/kchz2z

_carousel_show.html.erb :

<div id="carouselExampleControls" class="carousel slide w-100" data-bs-interval="false">
  <div class=”carousel-inner”>
    <%@annonce.images_urls.each_with_index do |pic,i|%>
    <div class="carousel-item <%= "active " if i==0 %>">
      <%= image_tag  pic, :class=>"d-block w-100" %>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <%end%>
  </div>
</div>

show.html.erb :

<div class="d-flex justify-content-between">
  <div class="card mb-3 m-5" style="width:500px";>  
      <div class="col-12">
        <!-- carousel -->
        <%= (render 'partials/carousel/carousel_show') %>
    </div>
    <div class="col-md-6">
     <div class="card-body">
      <h5 class="card-title"><%= @annonce.Type_de_bien %></h5>
      <p class="card-text"><%= @annonce.Texte_de_l_annonce %></p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      <!-- favorite link -->
      <!-- if statement to persist link class on page refresh -->                    
      <% if current_user.favorited?(@annonce) %>
      <%= link_to '', toggle_favorite_annonce_path(@annonce), remote: true, method: :post, :id => "this", :class => "bi-heart-fill" %>
      <% else %>
      <%= link_to '', toggle_favorite_annonce_path(@annonce), remote: true, method: :post, :id => "this", :class => "bi-heart" %>
      <% end %>
    </div>
    <% if current_user = @annonce.user_id %>
    <%= link_to 'Modifier', edit_annonce_path(@annonce), :class => "text-decoration-none text-secondary" %>
    <% end -%>
  </div>
</div>

  <div class="card border-dark mb-3 m-5" style="max-width: 18rem;">
    <div class="card-header">User detail</div>
    <div class="card-body text-dark">
      <h5 class="card-title">Full name</h5>
      <h5 class="card-title">Company name</h5>
      <h5 class="card-title">Company adress</h5>
      <h5 class="card-title">Phone number</h5>
      <h5 class="card-title"><%= @annonce.user.email %></h5>
      <h5 class="card-title"></h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</div>
lucas_grandviergne
  • 21
  • 4

1 Answers1

0

Try changing the bootstrap class and style for your image to img card-img-top and style: "height: 300px" (or whatever height you need). Like this:

<div id="carouselExampleControls" class="carousel slide w-100" data-bs-interval="false">
  <div class=”carousel-inner”>
    <%@annonce.images_urls.each_with_index do |pic,i|%>
    <div class="carousel-item <%= "active " if i==0 %>">
      <%= image_tag  pic, :class=>"img card-img-top", style: "height: 300px"  %>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <%end%>
  </div>
</div>
Rebecca
  • 88
  • 1
  • 9