How to keep CSS blocks equal? - css

Question

I am creating a virtual store where the main page shows the products, this is where the quantity of information in the detail of the product varies, the blocks begin to deform. How could you do to keep the size constant and in any case the text is truncated?
I'm working with MVC 5 and Bootstrap.
<!-- Bloque 1 -->
#foreach (var item in Model)
{
<div class="col-sm-3 col-lg-3 col-md-3">
<div class="thumbnail">
<!-- TRAE UNA IMAGEN DE CUALQUIER MANERA-->
<img src="#Url.Action("RenderImage", new { id = item.ProductoID})" alt="" width="150" height="320" />
<div class="panel panel-yellow">
<div class="panel-heading">
<h4 class="pull-right">$#item.PrecioUnitario</h4>
<h4>
<a href="#Url.Action("Detalle", new { id = item.ProductoID })" class="my-class">
#item.Nombre
</a>
</h4>
</div>
</div>
<div class="ratings">
#*<p>See more snippets like this online store item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>*#
<p>#item.DetallesCorto</p>
</div>
<div class="ratings">
<p class="pull-right">15 Me gusta</p>
<p>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
<span class="fa fa-fw fa-star"></span>
</p>
<p>
<button type="button" class="AddLink btn btn-block btn-success btn-xs" href="#" data-id="#item.ProductoID" data-toggle="modal" data-target="#myModal">
<i class="fa fa-fw fa-shopping-cart"></i> Agregar
</button>
</p>
</div>
<div class="ratings">
#if (Request.IsAuthenticated && User.IsInRole("Root") || User.IsInRole("Admin"))
{
<p>
<button type="button" class="anchorDetail btn btn-block btn-info btn-xs"
href="javascript:void(0);" data-id="#item.ProductoID">
<i class="fa fa-pencil"></i> Edicion rápida
</button>
</p>
<p>
<button type="button" class="popupDelete btn btn-block btn-danger btn-xs"
href="javascript:void(0);" data-id="#item.ProductoID">
<i class="fa fa-trash"></i> Eliminar
</button>
</p>
}
</div>
</div>
</div>
} <!-- Cierro Forech -->
</div>
That's how it looks now:

Answer 1

Solution 1 (CSS)
Set a fixed height on the red paragraph and the title and hide the overflow.
.thumbnail .ratings:nth-of-type(1) p {height: 100px; overflow: hidden;}
.thumbnail h4:nth-child(2) {height: 30px; overflow: hidden;}
Solution 2 (jQuery)
Create a javascript function setting the height equal to the tallest red paragraph and the tallest title.
var maxh = 0;
$('.thumbnail .ratings:nth-of-type(1) p').each(function() {
var h = $(this).height();
if(h > maxh) maxh = h;
});
$('.thumbnail .ratings:nth-of-type(1) p').css('height', maxh);
var maxh = 0;
$('.thumbnail h4:nth-child(2)').each(function() {
var h = $(this).height();
if(h > maxh) maxh = h;
});
$('.thumbnail h4:nth-child(2)').css('height', maxh);
You might be tempted to set a fixed height to the thumbnail div. But that will require you to set the rating stars and the green button to position: absolute; bottom: [amount]px; to align them properly. I am quite sure that is not compatible with the bootstrap floats and the responsive behaviour of these items.

Answer 2

You can loop through each .thumbnail item and find the max height, then apply a min-height to each element matching that max height:
$(document).ready(function() {
var maxHeight = 0;
$('.thumbnail').each(function() {
var height = $(this).height();
if(height > maxHeight) {
maxHeight = height;
}
});
$('.thumbnail').css('min-height', maxHeight);
});
You may need to utilize a delay such as setTimeout to ensure everything has been loaded prior to calculating the heights.

Answer 3

You should use rows or set equal height to all boxes with javascript/jquery. Bootstrap uses 12 cols per row so you could modify your code to separate by 4 items per row. Also you only need the smallest device col width if larger ones are same. In your case use col-sm-3 only.
<div class="row">
<div class="col-sm-3" ></div>
<div class="col-sm-3" ></div>
<div class="col-sm-3" ></div>
<div class="col-sm-3" ></div>
</div>

Answer 4

Give the boxes a set height for example:
.box {
height: 150px;
}