What is the best way to ensure all class=service-block elements have the same height?

Question

What is the best way to ensure all class=service-block elements have the same height?

While working on customizing a Hugo theme, I'm struggling to find information on how to set text boxes to a consistent height. Currently, the height of the boxes varies based on the amount of text they contain.

This is how the text boxes are currently displayed:

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

The code snippet from the theme's partial /layouts/partials/service.html looks like this:

            {{"<!-- /section title -->" | safeHTML }}
            {{ range .Site.Data.service.serviceItem}}
            {{"<!-- Single Service Item -->" | safeHTML }}
            <article class="col-lg-3 col-md-3 col-12 wow fadeInUp" data-wow-duration="500ms">
                <div class="service-block text-center">
                    <div class="service-icon text-center">
                        <i class="{{ .icon }}"></i>
                    </div>
                    <h3>{{ .title }}</h3>
                    <p>{{ .content }}</p>
                </div>
            </article>
            {{"<!-- End Single Service Item -->" | safeHTML }}
            {{ end }}

Additionally, the CSS for the section is defined as follows:

.service-2 .service-item {
  border: 1px solid #eee;
  margin-bottom: 30px;
  padding: 50px 20px;
  transition: all 0.3s ease 0s;
}

.service-2 .service-item:hover {
  box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
}

.service-2 .service-item:hover i {
  background: #fff;
  color: #57cbcc;
}

.service-2 .service-item i {
  font-size: 30px;
  display: inline-block;
  background: #57cbcc none repeat scroll 0 0;
  border-radius: 30px;
  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  height: 200px;
  line-height: 55px;
  margin-bottom: 20px;
  width: 55px;
  transition: all 0.3s ease 0s;
}

I'm wondering if there's a way to enforce a fixed height for these text boxes?

html css bootstrap-4 blogdown

Answer 1

Answer №1

No JavaScript required for this task. Simply add display: flex to the container of the blocks. The shorter children within the container will automatically adjust their size to fill the space.

.flexcontainer{
  display: flex;
}

.flexchild{
  border: solid;
  word-wrap: break-word;
  width: 100px;
  
}

<div class="flexcontainer">
  <div class="flexchild">
    <h3>title </h3>
    <p>asdf</p>
  </div>
  <div class="flexchild">
    <h3>title </h3>
    <p>asdfasdfasdf...</p>
  </div>
  <div class="flexchild">
    <h3>title </h3>
    <p>asdfasdf...</p>
    <p>asdfasdf...</p>
  </div>
  
  
</div>

Check out this CodePen example

For more information on Flexbox, I recommend this guide from CSS-Tricks

Answer 2

No JavaScript required for this task. Simply add display: flex to the container of the blocks. The shorter children within the container will automatically adjust their size to fill the space.

.flexcontainer{
  display: flex;
}

.flexchild{
  border: solid;
  word-wrap: break-word;
  width: 100px;
  
}

<div class="flexcontainer">
  <div class="flexchild">
    <h3>title </h3>
    <p>asdf</p>
  </div>
  <div class="flexchild">
    <h3>title </h3>
    <p>asdfasdfasdf...</p>
  </div>
  <div class="flexchild">
    <h3>title </h3>
    <p>asdfasdf...</p>
    <p>asdfasdf...</p>
  </div>
  
  
</div>

Check out this CodePen example

For more information on Flexbox, I recommend this guide from CSS-Tricks

Answer 3

Answer №2

function calculateHeight(element) {
  var styles = window.getComputedStyle(element);
  var height = element.offsetHeight;
  var borderTopWidth = parseFloat(styles.borderTopWidth);
  var borderBottomWidth = parseFloat(styles.borderBottomWidth);
  var paddingTop = parseFloat(styles.paddingTop);
  var paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

var heightArray = [];
document.querySelectorAll('.service-block').forEach(function(container) {
  heightArray.push(calculateHeight(container))
})

var maximumHeight = Math.max.apply(Math, heightArray);
document.querySelectorAll('.service-block').forEach(function(container) {
  container.style.height = maximumHeight + "px";
})

.service-block {
  width: 100px;
  background-color: #eee;
  padding: 10px;
}

.service-block p {
  word-break: break-all;
}

.col-md-3 {
  width: 33%;
  float: left;
}

<body>
  <div class="row">
    <div class="col-md-3">
      <div class="service-block text-center">
        <div class="service-icon text-center">
          <i class="fa fa-star"></i>
        </div>
        <h3>title</h3>
        <p>content</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="service-block text-center">
        <div class="service-icon text-center">
          <i class="fa fa-star"></i>
        </div>
        <h3>title</h3>
        <p>content.content.content.content.content.content</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="service-block text-center">
        <div class="service-icon text-center">
          <i class="fa fa-star"></i>
        </div>
        <h3>title</h3>
        <p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p>
      </div>
    </div>
  </div>
</body>

This method calculates the maximum height and applies it to each container.

Answer 4

function calculateHeight(element) {
  var styles = window.getComputedStyle(element);
  var height = element.offsetHeight;
  var borderTopWidth = parseFloat(styles.borderTopWidth);
  var borderBottomWidth = parseFloat(styles.borderBottomWidth);
  var paddingTop = parseFloat(styles.paddingTop);
  var paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

var heightArray = [];
document.querySelectorAll('.service-block').forEach(function(container) {
  heightArray.push(calculateHeight(container))
})

var maximumHeight = Math.max.apply(Math, heightArray);
document.querySelectorAll('.service-block').forEach(function(container) {
  container.style.height = maximumHeight + "px";
})

.service-block {
  width: 100px;
  background-color: #eee;
  padding: 10px;
}

.service-block p {
  word-break: break-all;
}

.col-md-3 {
  width: 33%;
  float: left;
}

<body>
  <div class="row">
    <div class="col-md-3">
      <div class="service-block text-center">
        <div class="service-icon text-center">
          <i class="fa fa-star"></i>
        </div>
        <h3>title</h3>
        <p>content</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="service-block text-center">
        <div class="service-icon text-center">
          <i class="fa fa-star"></i>
        </div>
        <h3>title</h3>
        <p>content.content.content.content.content.content</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="service-block text-center">
        <div class="service-icon text-center">
          <i class="fa fa-star"></i>
        </div>
        <h3>title</h3>
        <p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p>
      </div>
    </div>
  </div>
</body>

This method calculates the maximum height and applies it to each container.

What is the best way to ensure all class=service-block elements have the same height?

Answer №1

Answer №2

Similar questions

Is it possible for me to create a Rainmeter widget that uses HTML5 geolocation to find and display the nearest town or city?

Executing a function within ng-repeat

The functionality of Bootstrap tabs is compromised when used within a modal dialog

Moving divs to a separate line in mobile display

Using an Angular 1 controller scope method as a callback for a captcha library

What is the recommended alternative for the outdated or non-standard "align" element in use?

experiencing a problem with the scrollTo() function

Use the .htaccess file to redirect any non-existing page to a custom HTML page while maintaining the

Pressing the mouse on the div causes it to vanish until an animation is triggered

Incorporating Bootstrap content directories into ASP.NET website projects

What is the best way to center CSS slider switches without causing any damage to them?

Ways to designate the preceding page for the web browser's back button

Overflow of dropdown menus in HTML CSS

Get the values of var1 and var2 from the URL in PHP, for example: `example.php?var1

What is the best way to perform calculations within a PHP loop for <input> elements and then display the results using a JavaScript loop?

Visual Studio has issues with div elements nested within dl elements

Issue with Clicking Mouse to Display Content not Operational

Identify the location of the mouse and activate a specific function based

A problem arises in Next.js when CSS is not rendering properly during Server Side Rendering

Making changes to an AngularJS property updates the value of an HTML attribute