Post
Ask Question

ASP.NET MVC 5 - Matchheight.js📦 - Create Equal Height Of Columns In Row Using jQuery

Introduction

 
Here, in this write-up, we are going to learn how to match the height of the tallest of the rows by adjusting the column height. Why do we want to learn this? That is because when we have more than one columns that should appear side by side, we often want them to be of equal height to make them responsive and look nice. As a developer, we would face this scenario during the development. We can achieve this using bootstrap or custom CSS in our application but it can be done to the static layout or defined height. Just assume we have defined the layout with one div and appending the columns and rows in runtime. In the meantime, it will not get the chance to know that height. Here, we can achieve this using matchHeight.js without writing any CSS. Okay! Let's move forward. We will see the process with examples.
 
Prerequisites
  • Visual Studio
  • Basic knowledge of ASP.NET MVC
  • Basic knowledge of jQuery
  • Basic knowledge of CSS
Article Flow
  • Create a View for an example
  • Features of matchHeight.js
  • Configure matchHeight.js with our web application
 Create a View for this example
  1. @{  
  2.    ViewBag.Title = "Index";  
  3.    Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }  
  5. <style>  
  6.     h2,  
  7.     p {  
  8.         color: white;  
  9.     }  
  10. </style>  
  11. <br />  
  12. <div class="row">  
  13.     <div>  
  14.         <div class="col-md-4" style="background-color:teal;border:double;border-color:white">  
  15.             <img src="~/Content/Images/Image-2.png" width="100%" />  
  16.             <h2>MAHESH CHAND</h2>  
  17.             <p>BIO <br> C# Corner Founder, Author, International Speaker, and Startup Adviser. My role as the CEO of Mindcracker Inc, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.</p>  
  18.         </div>  
  19.         <div class="col-md-4" style="background-color:burlywood;border:double;border-color:white">  
  20.             <img src="~/Content/Images/Image-1.png" width="100%" />  
  21.             <h2>GNANAVEL SEKAR</h2>  
  22.             <p>BIO <br>Gnanavel Sekar has 4+ yrs experience in IT industry as a Sr.Software Engineer and C# Corner MVP. he have strong skill in C#,ASP.NET,MVC,WEB-API,C3 Charts, OrchardCMS,Docusign,Jquery,SqlServer,HTML5,CSS,EntityFramework,Swagger. Fan of Microsoft Technologies and hard core fan of Agriculture.He love challenges.</p>  
  23.         </div>  
  24.     </div>  
  25. </div>  
  26. <div class="row">  
  27.     <div class="col-md-4" style="background-color:orange;">  
  28.         <img src="~/Content/Images/test1.jpg" />  
  29.         <h2>MAHESH CHAND</h2>  
  30.         <p>BIO <br>Gnanavel Sekar has 4+ yrs experience in IT industry as a Sr.Software Engineer and C# Corner MVP. he have strong skill in C#,ASP.NET,MVC,WEB-API,C3 Charts, OrchardCMS,Docusign,Jquery,SqlServer,HTML5,CSS,EntityFramework,Swagger. Fan of Microsoft Technologies and hard core fan of Agriculture.He love challenges.</p>  
  31.     </div>  
  32.     <div class="col-md-4" style="background-color:chocolate;">  
  33.         <img src="~/Content/Images/test2.jpg" />  
  34.         <h2>GNANAVEL SEKAR</h2>  
  35.         <p>Hello <br><br><br>This is not what it <br>looks like</p>  
  36.     </div>  
  37. </div>  
Run your application.
 
In the below image, you can see that we have created two rows and two columns and for each row, the columns differ in the height of the image and text. The below layout is developed using Bootstrap and HTML.
 
 ASP.NET MVC 5 - Matchheight.js- Create Equal Height Of Columns In Row Using jQuery
 
Now, let us work with the matchHeight.js file.
 
Features of matchHeight.js  
  • It matches the heights for groups of elements automatically.
  • It uses the maximum height or defines a specific target element.
  • We can use it anywhere on the page and anywhere in the DOM.
  • Responsive (updates on window resize event).
  • Handles the images and other media (updates after loading).
  • Easily removable when needed.
  • Maintains scroll position. 

Configure matchHeight.js with our web application

 
Step 1 - Install matchHeight from NuGet
 
ASP.NET MVC 5 - Matchheight.js- Create Equal Height Of Columns In Row Using jQuery 
 
Step 2 - Include the library
 
Finally, include the library with a script tag in your document (note that jQuery needs to be included beforehand).
  1. <script src="~/Scripts/jquery.matchHeight.js"></script>  
Use the below link if you want to download it directly.
  1. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>  
Refer to the following dependency files for View.
  1. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  2. <script src="~/Scripts/bootstrap.min.js"></script>  
We have four columns with different heights in two rows. In order to make them all of the same height, initialize matchHeight() with jQuery. Before that, we have to define a common CSS for the columns in the row. Here, I have used the column-MaxHeight class for styling the columns.
 
ASP.NET MVC 5 - Matchheight.js- Create Equal Height Of Columns In Row Using jQuery 
 
Now, let's initialize matchHeight with jQuery for "column-Maxheight" CSS.
  1. <script type="text/javascript">  
  2.    $(document).ready(function () {  
  3.       $(".column-MaxHeight").matchHeight();  
  4.    });  
  5. </script>   
The matchHeight() can receive an object with 4 properties as the first parameter.
  1. $(".column-MaxHeight").matchHeight({  
  2.     byRow: true,  
  3.     property: 'height',  
  4.     target: null,  
  5.     remove: false  
  6. }); 
byRow-> is true or false to enable row detection
property-> is the CSS property name to set (e.g. 'height' or 'min-height')
target  ->is an optional element to use instead of the element with maximum height
remove-> is true or false to remove previous bindings instead of applying new ones 
 
Now, run your application. In the below image, you can see that we have got the same height of the columns for each row.
 
ASP.NET MVC 5 - Matchheight.js- Create Equal Height Of Columns In Row Using jQuery 
 
Here, the text is not in the same lines and images are not of similar size, right? So, we have to apply a CSS for the image and the tiles of each column to make them of the same height. In the below image, you can see that I have declared three classes for the image, title, and text respectively, such as "img-MaxHeight", "tittle-MaxHeight", and "text-MaxHeight".
 
ASP.NET MVC 5 - Matchheight.js- Create Equal Height Of Columns In Row Using jQuery 
 
Now, let's initialize the matchHeight JS with jQuery for their CSS ("img-MaxHeight", "tittle-MaxHeight", "text-MaxHeight").
  1. $(".img-MaxHeight").matchHeight();  
  2. $(".img-MaxHeight").matchHeight({  
  3.     byRow: true,  
  4.     property: 'height',  
  5.     target: null,  
  6.     remove: false  
  7. });  
  8. $(".tittle-MaxHeight").matchHeight();  
  9. $(".tittle-MaxHeight").matchHeight({  
  10.     byRow: true,  
  11.     property: 'height',  
  12.     target: null,  
  13.     remove: false  
  14. });  
  15. $(".text-MaxHeight").matchHeight();  
  16. $(".text-MaxHeight").matchHeight({  
  17.     byRow: true,  
  18.     property: 'height',  
  19.     target: null,  
  20.     remove: false  
  21. });  
Now, run your application.
 
ASP.NET MVC 5 - Matchheight.js- Create Equal Height Of Columns In Row Using jQuery 
 
Well, everything is in perfect alignment now.
 
Complete View
  1. @{  
  2.    ViewBag.Title = "Index";  
  3.    Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }  
  5. <style> h2, p {  
  6. color: white;  
  7. }  
  8. .column-MaxHeight {  
  9. height: auto !important;  
  10. }  
  11. </style>  
  12. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  13. <script src="~/Scripts/bootstrap.min.js"></script>  
  14. <script src="~/Scripts/jquery.matchHeight.js" type="text/javascript"></script>  
  15. <br />  
  16. <div class="row">  
  17.     <div>  
  18.         <div class="col-md-4 column-MaxHeight" style="background-color:teal;border:double;border-color:white">  
  19.             <img src="~/Content/Images/Image-2.png" class="img-MaxHeight" width="100%" />  
  20.             <h2 class="tittle-MaxHeight">MAHESH CHAND</h2>  
  21.             <p class="text-MaxHeight">BIO <br> C# Corner Founder, Author, International Speaker, and Startup Adviser. My role as the CEO of Mindcracker Inc, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.</p>  
  22.         </div>  
  23.         <div class="col-md-4 column-MaxHeight" style="background-color:burlywood;border:double;border-color:white">  
  24.             <img src="~/Content/Images/Image-1.png" class="img-MaxHeight" width="100%" />  
  25.             <h2 class="tittle-MaxHeight">GNANAVEL SEKAR</h2>  
  26.             <p class="text-MaxHeight">BIO <br>Gnanavel Sekar has 4+ yrs experience in IT industry as a Sr.Software Engineer and C# Corner MVP. he have strong skill in C#,ASP.NET,MVC,WEB-API,C3 Charts, OrchardCMS,Docusign,Jquery,SqlServer,HTML5,CSS,EntityFramework,Swagger. Fan of Microsoft Technologies and hard core fan of Agriculture.He love challenges.</p>  
  27.         </div>  
  28.     </div>  
  29. </div>  
  30. <div class="row">  
  31.     <div class="col-md-4 column-MaxHeight" style="background-color:orange;">  
  32.         <img src="~/Content/Images/test1.jpg" class="img-MaxHeight" width="100%" />  
  33.         <h2 class="tittle-MaxHeight">MAHESH CHAND</h2>  
  34.         <p class="text-MaxHeight">BIO <br>Gnanavel Sekar has 4+ yrs experience in IT industry as a Sr.Software Engineer and C# Corner MVP. he have strong skill in C#,ASP.NET,MVC,WEB-API,C3 Charts, OrchardCMS,Docusign,Jquery,SqlServer,HTML5,CSS,EntityFramework,Swagger. Fan of Microsoft Technologies and hard core fan of Agriculture.He love challenges.</p>  
  35.     </div>  
  36.     <div class="col-md-4 column-MaxHeight" style="background-color:chocolate;">  
  37.         <img src="~/Content/Images/test2.jpg" class="img-MaxHeight" width="100%" />  
  38.         <h2 class="tittle-MaxHeight">GNANAVEL SEKAR</h2>  
  39.         <p class="text-MaxHeight">Hello <br><br><br>This is not what it <br>looks like</p>  
  40.     </div>  
  41. </div>  
  42. <script type="text/javascript">  
  43.     $(document).ready(function() {  
  44.         $(".column-MaxHeight").matchHeight();  
  45.         $(".column-MaxHeight").matchHeight({  
  46.             byRow: true,  
  47.             property: 'height',  
  48.             target: null,  
  49.             remove: false  
  50.         });  
  51.         $(".img-MaxHeight").matchHeight();  
  52.         $(".img-MaxHeight").matchHeight({  
  53.             byRow: true,  
  54.             property: 'height',  
  55.             target: null,  
  56.             remove: false  
  57.         });  
  58.         $(".tittle-MaxHeight").matchHeight();  
  59.         $(".tittle-MaxHeight").matchHeight({  
  60.             byRow: true,  
  61.             property: 'height',  
  62.             target: null,  
  63.             remove: false  
  64.         });  
  65.         $(".text-MaxHeight").matchHeight();  
  66.         $(".text-MaxHeight").matchHeight({  
  67.             byRow: true,  
  68.             property: 'height',  
  69.             target: null,  
  70.             remove: false  
  71.         });  
  72.     });  
  73. </script>   

Summary 

 
In this article, we have seen how to match the height of the tallest of the rows by adjusting the column heights while we have more than one columns that should appear side by side and want them to be of equal height to make them responsive. Refer to the attached project for reference.
 
I hope you enjoyed this article. Your valuable feedback and comments about this article are always welcome. 


Similar Articles