Consistent column height across each row

Currently, I am utilizing bootstrap and jquery to accomplish a specific task. My goal is to select the first child class after all columns on the webpage.

var one = $(".col-x .some-class")

Afterwards, I aim to obtain the height of all elements with the .some-class attribute and identify the tallest among them.

The exact objective I am striving for involves:

1- Finding the tallest height between .some-div elements and adjusting the others to match by adding top and bottom padding.

2- Implementing this function for each row while ensuring that each row receives the tallest height of .some-class elements.

If my explanation is unclear, please inform me so I can provide a code example.

Feel free to view the demonstration on JSFiddle: https://jsfiddle.net/Devel0per95/g2eo4n38/2/

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Is there a solution similar to this: https://jsfiddle.net/g2eo4n38/4/ ?

function fixHeight() {
  // 1. Find the tallest element
  var tallest = 0
  $(".blog-item").each(function() {
    var height = $(this).height();
    if (height > tallest) {
        tallest = height;
    }
  });

  // 2. Adjust the height of the elements
  $(".blog-item").each(function() {
    $(this).height(tallest);
  });
}

fixHeight();

Another technique involves utilizing CSS grids, like the example below (eliminating the need for JS for styling):

#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px;
}

.blog-item{
    background-color: #f6f7f7;
    border-radius: 3px;
    padding: 15px;
    margin-bottom: 30px;
}
.blog-item .subtitle-item {
    font-weight: bold;
    color: #ffbd1f;
}
.blog-item-title{
    text-transform: uppercase;
    margin-bottom: 30px
}
.blog-item-title h3{color: #333;}
.blog-item-title h3, .blog-item-title p {transition: 0.3s;}
.blog-item-title a:hover h3, .blog-item-title a:hover p {opacity: 0.6;}
.blog-item-body{margin-bottom: 15px;}

.blog-item-tags ul li{
    border: 1px solid #dcdcdc;
    display: inline-block;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 20px;
    padding: 5px 10px;
    transition: 0.3s;
    cursor: pointer;
}
.blog-item-tags ul li:hover{
    background-color: #ffbd1f;
    color: #fff;
    border-color: #ffbd1f;
}
.blog-item a{
    text-transform: uppercase;
    font-weight: bold;
    transition: 0.3s;
}
.blog-item a:hover {color: #ffbd1f;}
.blog-item a .fa{
    font-weight: bold;
    font-size: 16px; 
}
.blog-item.featured{background-color: #ffbd1f;}
.blog-item.featured .blog-item-title p, .blog-item.featured .blog-item-title h3, .blog-item.featured p, .blog-item.featured a {
    color: #fff !important;
}
.blog-item.featured ul li {
    color: #fff !important;
    background-color:#dda114;
    border-color: transparent;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div id="grid">
  <div class="blog-item bg featured">
    <div class="blog-item-title">
      <a href="#" target="_blank">
        <p class="subtitle-item mb-5">Market Outlook</p>
        <h3 class="m-0">4Q 2018 Off-Grid And Mini-Grid Market Outlook</h3>
      </a>
    </div>
    <div class="blog-item-body">
      <p>Acquisitions, partnerships, and new technology capabilities
        dominated
        the microgrid news flow in the past few months. Project activity…</p>
    </div>
    <div class="blog-item-tags">
      <ul>
        <li>Tag #1</li>
        <li>Tag #2</li>
      </ul>
    </div>
    <a href="content.html">Read more<i class="fa fa-angle-right ml-5"
                                       aria-hidden="true"></i></a>
  </div>
  <div class="blog-item">
    <div class="blog-item-title">
      <a href="#" target="_blank">
        <p class="subtitle-item mb-5">Insight</p>
        <h3 class="m-0">Distributed Energy in Emerging Markets</h3>
      </a>
    </div>
    <div class="blog-item-body">
      <p>Advances in distributed technologies at the frontiers of today’s
        energy
        system can now provide power where the traditional grid is…</p>
    </div>
    <div class="blog-item-tags">
      <ul>
        <li>Tag #1</li>
        <li>Tag #2</li>
        <li>Tag #3</li>
        <li>Tag #4</li>
        <li>Tag #5</li>
        <li>Tag #6</li>
      </ul>
    </div>
    <a href="content.html">Read more<i class="fa fa-angle-right ml-5"
                                       aria-hidden="true"></i></a>
  </div>
  <div class="blog-item">
    <div class="blog-item-title">
      <a href="#" target="_blank">
        <p class="subtitle-item mb-5">Insight</p>
        <h3 class="m-0">Clean Energy And The Paris Promises</h3>
      </a>
    </div>
    <div class="blog-item-body">
      <p>The 2015 Paris Agreement saw virtually every nation on earth pledge
        to
        address the threat of climate change. Each country’s Nationally…</p>
    </div>
    <div class="blog-item-tags">
      <ul>
        <li>Tag #1</li>
        <li>Tag #2</li>
        <li>Tag #3</li>
        <li>Tag #4</li>
      </ul>
    </div>
    <a href="content.html">Read more<i class="fa fa-angle-right ml-5"
                                       aria-hidden="true"></i></a>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to locate the first element of a specific class using a distinctive ID in jQuery

I have a collection of elements that looks like this: <article id="post-647" class="brand-search-result brand-alaffia hidden"></article> <article id="post-647" class="brand-search-result brand-alaffia hidden"></article> <article ...

jquery

The implementation of $(this).addClass within AJAX success is not yielding the desired results

Currently, I am working on some ajax processing for a click event. Everything is functioning correctly so far, but now I have encountered an issue when trying to add a class in the success function. I am using $(this).addClass("cover");, however, nothing ...

jqueryajax

The function setSize() is ineffective for adjusting the browser dimensions when using JavaScript in Selenium

Attempting to adjust the size of the browser window using the following JavaScript code: driver.get(url); driver.manage().window().setSize(1200,800); Encountering an error message: 'setSize is not a function\n'. Seeking assistance in r ...

javascriptseleniumprotractor

What is the best way to switch the CSS class of a single element with a click in Angular 2

When I receive data from an API, I am showcasing specific items for female and male age groups on a webpage using the code snippet below: <ng-container *ngFor="let event of day.availableEvents"> {{ event.name }} <br> <n ...

javascriptangulartypescript

Alternative to Webpack for modifying global variables in preloaded modules

Is there a way to shim moment.js in webpack similar to how it is done in browserify? I have developed a widget using npm and webpack, which will be included in another application. The other app already has moment.js loaded via a script tag. I want to av ...

javascriptnode.jsnpmbrowserifywebpack

How to programmatically submit a file using jQuery

Is there a way to automatically submit a form to a php file using jQuery? Currently, I have the following form setup: <form action='add.php' method='get'> <input type='hidden' name='title' value='$ ...

phpjquery

Displaying empty values in the post via plupload data

I have encountered an issue where a JSON string that I am trying to post is not getting posted, despite being visible in an alert. The strange part is that when I manually create a JSONArray, it gets posted successfully. Below is the code snippet, I would ...

javascriptjqueryjquery-pluginsplupload

Personalizing the Twitter Embedded Timeline

I am curious about how much customization options are available for the Embedded Timeline. I searched through the documentation but still have some unanswered questions - maybe I missed something. My goal is to initially display only one tweet and then ha ...

javascriptjquerytwitter

Switching the background image upon hover while incorporating a subtle fade transition in HTML and CSS

Is there a way to set two background images on a div and have them change when hovering with a fade effect? Similar to the example shown. .kid { max-width:50%; position:relative; } .kid img { display:block; opacity:1; height: auto; transition:.6s ease; ...

htmlcssanimationhoverfade

Creating videos for banners

So I have a website at this URL: My goal is to achieve the following: I want the video to play in the banner and adjust the Iframe size based on the user's device resolution I want the video to autoplay I want the logo, text, & button to be dis ...

csshtml

Open a new HTML page with jQuery with a click event trigger on an iframe element

Hello everyone, I have a simple question as I am still learning about Jquery. I am attempting to load another .html page whenever a figure element is clicked on this .html page. However, the script tag is not working as expected. Can someone please assist ...

javascriptjqueryhtmlcss

React checkbox is experiencing an issue where the onchange event is returning as undefined the first time it is triggered

When using a React checkbox, the onChange event outputs undefined for the first click, and then shows a valid true or false output. I have tried searching online for a solution but have not been able to solve the problem. Can someone please help me identi ...

javascriptreactjs

What is the most efficient method for locating the smallest and largest values in a list of elements?

One array contains numbers and the other contains names. Here's an example: A: 4, B: 3, C: 2, A: 5, C: 3, My goal is to identify the elements with the smallest and largest values. I am aware that I could create an array of objects and sort it using m ...

javascriptnode.jsarraysalgorithmsorting

Retrieve all attributes of an element with the help of jQuery

I am attempting to extract all the attributes of an element and display their names and values. For instance, an img tag may have multiple unknown attributes that I need to access. My initial idea is as follows: $(this).attr().each(function(index, element ...

javascriptjqueryattributes

NodeJS Socket not transmitting file after connection with client

Having scoured the depths of various resources, including SO and Google, I have hit a roadblock. I am struggling to understand why the socket is failing to capture the uploaded file via the form; it simply stops after connecting. When I check the console, ...

javascriptnode.jsexpresssocket.io

Turbolinks 5 optimization for asynchronous data transfer using POST requests

In my Rails 5 / Turbolinks 5 project, I am looking to insert the HTML generated by a form submission into a specific div element. The form itself is a standard Rails form: = form_for(user) do |f| Upon successful submission of the form, a redirect is tri ...

jqueryruby-on-railsajaxturbolinks-5

Using forEach Loop with Promise.all in Node.js

I am seeking a solution for a task where I need to read a directory, copy its contents, and create a new file within that same directory. function createFiles(countryCode) { fs.readdir('./app/data', (err, directories) => { if (err) { ...

javascriptnode.jspromisees6-promise

Transitioning the width in CSS without using the "auto"

Currently, I am experiencing a problem with my CSS animation that is leaping directly from the start to finish. It appears to be connected to a similar issue addressed in this thread. My inquiry is: Is there a way to create a smooth transition in width f ...

csswidthcss-transitions

GZIP compression causes a total page layout malfunction

Thank you for taking the time to visit. I've been attempting to tackle this issue on my own, but it seems to be a bit overwhelming for me once again. THE SCENARIO... I have my website live on a shared hosting platform. As I delved into compressing my ...

css.htaccesscompressiongzipzlib

In the realm of JavaScript, what happens when a function yields yet another function while also welcoming another function as an argument?

After following a Node & Express project tutorial on YouTube, I encountered the following code snippet in an async JavaScript file: const asyncHWrapper = (fn) => { return async (req, res, next) => { try { await fn(req, res, next); } c ...

javascriptfunctionexpresswrapper