What is the best way to ensure uniform header height on cards or similar elements using flexbox?

Question

What is the best way to ensure uniform header height on cards or similar elements using flexbox?

Avoid using hacks

Do not hard code the solution. The goal is to create a solution that works for dynamic content and responsive screen sizes, rather than just one specific case.

The issue lies in the fact that the headers are not direct children of the elements they need to match heights with.

Find the codepen here:

https://codepen.io/anon/pen/OxzrzV

HTML

<h1>disclaimer: resize the window. Make the blue headers in a row match height</h1>
<div class="row mycontainer">
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
      </div>
  </div>
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">oh no this header wraps</div>
        <div class="content">some content lala </div>
      </div>
  </div>
</div>

CSS

 body{
  padding: 20px;
}

.item{
  height: 100%;
  padding-right: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column
}

.header{
  background-color: cornflowerblue;
}

.content{
  background-color: salmon;
  flex-grow: 1;
}

.mycontainer{
  max-width: 500px;
}

What am I looking for?

I want the blue headers to always have the same size as all elements in the current row.

A reliable jQuery solution is acceptable, as long as it works seamlessly on resizing. A change in the HTML structure is also welcome if it ensures responsiveness.

Here is an example of what I want to achieve (without hard coding and being responsive):

https://i.sstatic.net/H1anS.png

jquery twitter-bootstrap css flexbox

Answer 1

Answer №1

There are two main approaches to achieve this desired effect: one using CSS and the other involving jQuery.

CSS - How to have children in different parents the same height?

The first method demonstrates how to set equal heights for all items, while the second method sets equal heights per row by checking each item's top value (which changes when a new row begins).

In addition, there are a couple of optimizations included such as preloading items and avoiding processing if there is only one item or column.

View Updated codepen 1

Snippet 1:

(function ($) {

  // preload object array to gain performance
  var $headers = $('.header')
  
  // run at resize
  $( window ).resize(function() {
    $.fn.setHeaderHeight(0);   
  });  

  $.fn.setHeaderHeight = function(height) {

    // reset to auto or else we can't check height
    $($headers).css({ 'height': 'auto' });
    
    // get highest value
    $($headers).each(function(i, obj) {    
      height = Math.max(height, $(obj).outerHeight())
    });

    // set the height
    $($headers).css({ 'height': height + 'px' });    
  }

  // run at load
  $.fn.setHeaderHeight(0);
  
}(jQuery));

body{
  padding: 20px;
}

.item{
  height: 100%;
  padding-right: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column
}

.header{
  background-color: cornflowerblue;
}

.content{
  background-color: salmon;
  flex-grow: 1;
}

.mycontainer{
  max-width: 500px;
}

(pre and script elements continue...)

View Updated codepen 2

Snippet 2:

(paste snippet from here)

To cater to those who prefer plain javascript, I have also provided an updated sample that dynamically applies a class with computed height values to achieve equal heights on all items.

Stack Snippet:

(paste snippet from here)

Answer 2

There are two main approaches to achieve this desired effect: one using CSS and the other involving jQuery.

CSS - How to have children in different parents the same height?

The first method demonstrates how to set equal heights for all items, while the second method sets equal heights per row by checking each item's top value (which changes when a new row begins).

In addition, there are a couple of optimizations included such as preloading items and avoiding processing if there is only one item or column.

View Updated codepen 1

Snippet 1:

(function ($) {

  // preload object array to gain performance
  var $headers = $('.header')
  
  // run at resize
  $( window ).resize(function() {
    $.fn.setHeaderHeight(0);   
  });  

  $.fn.setHeaderHeight = function(height) {

    // reset to auto or else we can't check height
    $($headers).css({ 'height': 'auto' });
    
    // get highest value
    $($headers).each(function(i, obj) {    
      height = Math.max(height, $(obj).outerHeight())
    });

    // set the height
    $($headers).css({ 'height': height + 'px' });    
  }

  // run at load
  $.fn.setHeaderHeight(0);
  
}(jQuery));

body{
  padding: 20px;
}

.item{
  height: 100%;
  padding-right: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column
}

.header{
  background-color: cornflowerblue;
}

.content{
  background-color: salmon;
  flex-grow: 1;
}

.mycontainer{
  max-width: 500px;
}

(pre and script elements continue...)

View Updated codepen 2

Snippet 2:

(paste snippet from here)

To cater to those who prefer plain javascript, I have also provided an updated sample that dynamically applies a class with computed height values to achieve equal heights on all items.

Stack Snippet:

(paste snippet from here)

Answer 3

Answer №2

My solution involves using jQuery to handle the task. The challenge here is to ensure that each row has equal height, regardless of the content in each row.

What I've implemented is a logic where I assign a unique class based on the top position of each header element. This makes it easy to identify and manipulate entire rows when needed. During iteration, I track the maximum height within each row and apply it to all elements in that row once a new row begins.

Below is the snippet of code showcasing this approach...

function adjustHeaderHeights() {

    // Reset all heights initially.
    $('div.header').css('height','auto');

    var curRow=$('div.header').first().offset().top,
        curRowMaxHeight=$('div.header').first().height();
    var n = $('div.header').length;

    $('div.header').each(function(index) {

        var rowId = $(this).offset().top;
        $(this).addClass('rowid'+rowId);

        if (rowId != curRow) {
            $('div.header.rowid'+curRow).height(curRowMaxHeight); 
            curRow = rowId;
            curRowMaxHeight=$(this).height();
        }
        else {
            curRowMaxHeight = $(this).height() > curRowMaxHeight ? $(this).height() : curRowMaxHeight;

            if (index+1 == n)
                $('div.header.rowid'+curRow).height(curRowMaxHeight);
        }
    });

}

$(window).resize(function() {
    adjustHeaderHeights();
});

adjustHeaderHeights();

I trust this solution will be beneficial for your needs.

Answer 4

My solution involves using jQuery to handle the task. The challenge here is to ensure that each row has equal height, regardless of the content in each row.

What I've implemented is a logic where I assign a unique class based on the top position of each header element. This makes it easy to identify and manipulate entire rows when needed. During iteration, I track the maximum height within each row and apply it to all elements in that row once a new row begins.

Below is the snippet of code showcasing this approach...

function adjustHeaderHeights() {

    // Reset all heights initially.
    $('div.header').css('height','auto');

    var curRow=$('div.header').first().offset().top,
        curRowMaxHeight=$('div.header').first().height();
    var n = $('div.header').length;

    $('div.header').each(function(index) {

        var rowId = $(this).offset().top;
        $(this).addClass('rowid'+rowId);

        if (rowId != curRow) {
            $('div.header.rowid'+curRow).height(curRowMaxHeight); 
            curRow = rowId;
            curRowMaxHeight=$(this).height();
        }
        else {
            curRowMaxHeight = $(this).height() > curRowMaxHeight ? $(this).height() : curRowMaxHeight;

            if (index+1 == n)
                $('div.header.rowid'+curRow).height(curRowMaxHeight);
        }
    });

}

$(window).resize(function() {
    adjustHeaderHeights();
});

adjustHeaderHeights();

I trust this solution will be beneficial for your needs.

What is the best way to ensure uniform header height on cards or similar elements using flexbox?

Answer №1

Answer №2

Similar questions

"Placing the save button on top of a div - a step

trouble with fetching data

The trick to keeping a div open without it closing until the page is refreshed

elements on the page that automatically update using AJAX

Using JQuery Noty in combination with Codeigniter Framework

How can I ensure that the AppBar background color matches the color of the navigation bar?

Maintain the fixed position of the table header while scrolling

Aligning elements in the center vertically using absolute positioning for multiple elements

The functionality of switching between two layouts using a JavaScript button is currently not functioning

Displaying a hand cursor on a bar chart when hovered over in c3.js

Tips for preserving drop down selections when refreshing the page

Display fixed or absolute elements within a scrollable container

Which library does stackoverflow utilize to showcase errors (utilizing Bootstrap popover for error help-block)?

Tips for making a website display in landscape mode rather than portrait orientation

Disabling directional focus navigation in CSS: A comprehensive guide

What causes the CSS height attribute to mess up UL lists?

Using the Jquery .each loop is a powerful way to

Aligning elements next to each other in html / css without using any top margins

fixed divs that remain in place while scrolling

Hover activates a CSS animation where elements pop over other elements