Search code examples
ruby-on-railswill-paginateclearfix

How to add a div class clearfix in a rails will_paginate


How do I add <div class="clearfix visible-lg-block visible-md-block visible-sm-block"></div> into this code? The problem I am having is that each paginated user will not always be the same height and when the heights are off the next row gets messed up. I need the <div class="clearfix visible-lg-block visible-md-block visible-sm-block"></div> to be inserted into the code after each row etc

<div class="row community">
  <% @users.in_groups_of(3, false).each do |users| %>
    <% users.each do |user| %>
      <div class="col-md-4 col-sm-6 col-xs-6">
          <div class="col-xs-12">
            <center><p class="user-name"><%= link_to user.name, user %></p></center>
          </div>
          <div class="col-xs-4">
            <div class="user-image">
              <%= link_to image_tag(user.photo.thumb.url, class: "circular"), user %>
            </div>
          </div>
          <div class="col-xs-8 community">
            <ul class="name-head">
              <li class="witty">
                <%= user.profile %>
              </li>
              <% if current_user == user %>
              <li class="update"><%= link_to "Update Your Bio", edit_user_path(current_user) %></li>
              <% end %>
              <li class="follow">
              <% unless current_user == user %>
                <%= render partial: "follow_form", locals: { user: user } %>
              <% end %>
              </li>
            </ul>
          </div>
          <div class="col-xs-12">
            <div class="following-list">
              <div class="col-xs-4">
                <a href="<%= following_user_path(user.id) %>">
                  <center><strong id="following" class:"stat">
                  <%= user.following.count %><br>
                  following
                  </strong></center>
                </a>  
              </div>
              <div class="col-xs-4">
                <a href="<%= followers_user_path(user.id) %>">
                  <center><strong id="followers" class="stat">
                    <%= user.followers.count %><br>
                    followers
                  </strong></center>
                </a>
              </div>
              <div class="col-xs-4">
                <a href="<%= user_path(user.id) %>">
                  <center><strong id="photo-count" class="stat">
                    <%= user.photos.count %><br>
                  photos
                  </strong></center>
                </a>  
              </div>
            </div>  
        </div>
        </div>
    <% end %>
  <% end %>
</div>
<%= will_paginate @users %>        

Solution

  • I don't think this is possible to use the bootstrap clearfix along with the rails block functino/will_paginate. Some options are: clearfix every nth child or adding a fixed-height css property to the containing div which will make them the same size.