Why is my bootstrap clearfix breaking in my Rails collection?

Question

I am a student working on my final project. Below you will see two screen-shots of my application. The first is the normal desktop view, where everything is rendered correctly. As you begin to resize the view-port smaller, the position of items becomes uneven as you can see in the second screen shot.

Am I using the clearfix incorrectly for Bootstrap? I attempted to place the clearfix underneath each vehicle but then realized from checking the Bootstrap documentation that the clearflix class must wrap around said items. Below is my code:

vehicles/index.html.erb

<div class="row">


<!-- Side Column -->
  <div class="col-sm-3">
    <h3 class="item-category">Make: </h3>
    <ul class="side-menu">
      <%= form_tag filter_vehicles_path do |f| %>
        <% Vehicle.makes.each do |make| %>
            <li>
              <%= display_chosen_check_box_tag(make, params[:makes], "makes[]") -%>
              <%= make -%>
            </li>
        <% end %>

  <h3 class="item-category">Year: </h3>
        <% Vehicle.year_ranges.each do |range| %>
            <li>
              <%= display_chosen_check_box_tag(range, params[:years], "years[]") -%>
              <%= range -%>
            </li>
        <% end %>

        <li><%= submit_tag "Filter" %></li>
      <% end %>
    </ul>
  </div>

  <!-- Body Column -->
  <div class="col-sm-9">
      <div class="row">
        <div class="clearfix">
          <% @vehicles.each do |vehicle| %>
            <div class="col-sm-6 bottom">
              <h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
                <%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
                <p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
                <%= link_to "View Details", vehicle, class: "item-more" %>
            </div>
          <% end %>
        </div>
      </div>
  </div>
</div>

the loop in question

<!-- Body Column -->
  <div class="col-sm-9">
      <div class="row">
        <div class="clearfix">
          <% @vehicles.each do |vehicle| %>
            <div class="col-sm-6 bottom">
              <h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
                <%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
                <p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
                <%= link_to "View Details", vehicle, class: "item-more" %>
            </div>
          <% end %>
        </div>
      </div>
  </div>

Regards.

You are using `.clearfix` incorrectly. The primary and most common use of such class is to put an empty `
` after all elements that have a `float:left` property. I would suggest to remove the `.clearfix` entirely and search how to make your `.col-sm-6` of same height. Take a look [here](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height), you might find the answers provided helpful. — Tasos K., Oct 31 '15 at 12:46

HDP · Answer 1 · 2015-10-23T06:50:45.520

You need to set your body code with following structure for your resolve issue. You will need to add clearfix class after every 2 item.

<div class="col-sm-9">
      <div class="row">
        <div class="item-layout">
            <div class="item">Your content</div>
            <div class="item">Your content</div>
            <span class="clearfix visible-lg-block"></span>
            <div class="item">Your content</div>
            <div class="item">Your content</div>
            <span class="clearfix visible-lg-block"></span>
            <div class="item">Your content</div>
            <div class="item">Your content</div>
            <span class="clearfix visible-lg-block"></span>
            <div class="item">Your content</div>
            <div class="item">Your content</div>
            <span class="clearfix visible-lg-block"></span>
        </div>
      </div>
  </div>

According to your code, You have set 2 column(2 item) in per row. So, You will need to add clearfix class after every 2 item. but, Here, Your code is dynamic with loop. So, Here, You will need to add clearfix class dynamic every 2 item. So, You will add dynamic clearfix class with jquery according screen view.

Try following instruction with your code.

First of all, add item-layout class in your main item div. also, add item class in your loop div. following example.

<!-- Body Column -->
  <div class="col-sm-9">
      <div class="row">
        <div class="item-layout">
          <% @vehicles.each do |vehicle| %>
            <div class="col-sm-6 bottom item">
              <h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
                <%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
                <p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
                <%= link_to "View Details", vehicle, class: "item-more" %>
            </div>
          <% end %>
        </div>
      </div>
  </div>

also, add following jquery for add dynamic <span class="clearfix visible-lg-block"></span> for clearfix.

<script type="text/javascript">
$(document).ready(function(){
$screensize = $(window).width();
    if ($screensize > 1199) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block"></span>');
    }
    if ($screensize < 1199) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-md-block"></span>');
    }
    if ($screensize < 991) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-sm-block"></span>');
    }
$( window ).resize(function() {
    $screensize = $(window).width();
    if ($screensize > 1199) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block"></span>');
    } 
    if ($screensize < 1199) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-md-block"></span>');
    }
    if ($screensize < 991) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-sm-block"></span>');
    }
    if ($screensize < 767) {
        $(".item-layout > .clearfix").remove();
    }
});
});
</script>

This is a really great idea to a very common problem in Ruby on Rails apps where we use the block function to paginate our object with multiple bootstrap classes, for example `col-xs-12` `col-sm-6` `col-md-4` as we will need the `clearfix` in different places depending on screen size. Creating a `min-height` css rule does not always result in aesthetically pleasing web design. — Timmy Von Heiss, Dec 15 '16 at 03:29

score 1 · Accepted Answer · answered Oct 28 '15 at 06:33

No need to add too much of javascript and and clearfix and all. We just need to have tweak in css. You just need to add min-height to items. Everything will be solved. I have created a fiddle for you. In fiddle:
Demo1 is your scenerio and demo2 is the fixed scenerio. try resizing the viewport to see the effect on demo1 and demo 2.

https://jsfiddle.net/Anuj_Kumar/sc17mzkp/1/

If still your problem is not solved just let me know i will solve that too.

Thanks

score 0 · Answer 3 · answered Oct 28 '15 at 13:54

<!-- Body Column -->
  <div class="col-sm-9">
      <div class="row">
        <div class="clearfix">
          <% @vehicles.each do |vehicle| %>
            <div class="col-sm-6 bottom" style="display: -webkit-flex;display: flex;">
              <h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
                <%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
                <p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
                <%= link_to "View Details", vehicle, class: "item-more" %>
            </div>
          <% end %>
        </div>
      </div>
  </div>

add this style="display: -webkit-flex;display: flex;".

Rich Seviora · Answer 4 · 2015-10-31T04:19:40.900

The problem is that your object heights are uneven. You're looking for a grid-style substitute given that you have an expectation to have these items reflow on resize.

I'd recommend using a CSS Flexbox layout on your collection container.

display: flex;
flex-wrap: wrap;

Here's a demonstration.

The other problem (as HarnishDesign noted) is that your use of the clearfix is incorrect. It puts everything after on a whole new line because it's using the clear: both rule. Read up on the clear rule here.

Edit 1

It's worth noting that the Flexbox properties are not standardized yet, but there is wide support for them.

Why is my bootstrap clearfix breaking in my Rails collection?

4 Answers4