Equal height of all the sibling element in a row
Posted By : Vinay Tiwari | 30-May-2017
In this blog there was a similar problem in every row, all div's are unequal height. To eliminate this problem, I have used custom jquery function. With help of jquery, we can find the maximum height of each row and give all the div's are fixed height. So that every single row gets equal height.
This blog explains us how to give equal height to the elements present at the same level of DOM tree and having a same parent.
Now we will define the code structure
(HTML)
<div class="provider-main-page"> <div class="panel panel-default"> <div class="panel-body"></div> </div> <div class="panel panel-default"> <div class="panel-body"></div> </div> <div class="panel panel-default"> <div class="panel-body"></div> </div> </div> <div class="provider-main-page"> <div class="panel panel-default"> <div class="panel-body"></div> </div> <div class="panel panel-default"> <div class="panel-body"></div> </div> <div class="panel panel-default"> <div class="panel-body"></div> </div> </div> <div class="provider-main-page"> <div class="panel panel-default"> <div class="panel-body"></div> </div> <div class="panel panel-default"> <div class="panel-body"></div> </div> <div class="panel panel-default"> <div class="panel-body"></div> </div> </div>
(JQUERY)
function makeProviderRowEqual(){
$(".provider-main-page").each(function(){
$(this).find(".panel-body").height('auto');
var c = [];
for(var i=0; i < $(this).find(".panel-body").length; i++){
var height = $(this).find(".panel-body").eq(i).outerHeight();
c.push(height)
}
$(this).find(".panel-body").outerHeight( Math.max.apply(Math,c));
});
}
Declaration
In above code eachfunction Iterate over a jQuery object, executing a function for each matched element. The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object.
This function is executed on each and every row and find the maximum height of div(column in that row) and push the maximum height for each row in an array. Here, outerHeight function is used which give maximum height. It's inbuilt function in jquery. Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.
Math.max.apply(Math,c) function is used to find the maximum height of a portion(row-column).
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vinay Tiwari
Vinay is a bright UI developer, having knowledge of HTML, CSS, Bootstrap, Jquery and AngularJs. His hobbies are interacting with people, listening music etc.