Why is my bootstrap clearfix breaking in my Rails collection? - css

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.

Answer 1

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

Answer 2

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>

Answer 3

<!-- 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;".

Answer 4

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.