The height of a Bootstrap row is affected by the presence of an icon within the row

I'm struggling to make all three rows of my table have the same height. Unfortunately, the row with the icon always ends up taller.

Is there a CSS trick that can automatically set a consistent height for all rows in the table, regardless of whether they contain an icon or not?

<!DOCTYPE html>
<html lang="en" >
<head>
    <title>TEST</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
<style>
#my_div {
    line-height: 0.3;
}
.my_icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}
</style>


<div class="container-fluid bg-info" id="my_div">
  <table class="table">
    <tbody>
      <tr class="table-primary row">
        <td class="col-sm-2">No Icon in this row. </td>
      </tr>
      <tr class="table-primary row">
        <td class="col-sm-2">Icon Row:
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-class my_icon"><path d="M15 3h2a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-2"/><polyline points="8 13 12 9 8 5"/><line x1="12" y1="9" x2="2" y2="9"/></svg>
        </td>
      </tr>
      <tr class="table-primary row">
        <td class="col-sm-2">No Icon in this row. </td>
      </tr>
    </tbody>
  </table>
</div>
  </body>
</html>


#my_div {
  line-height: 0.3;
}

.my_icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container-fluid bg-info" id="my_div">
  <table class="table">
    <tbody>
      <tr class="table-primary row">
        <td class="col-sm-2">No Icon in this row. </td>
      </tr>
      <tr class="table-primary row">
        <td class="col-sm-2">Icon Row:
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-class my_icon"><path d="M15 3h2a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-2"/><polyline points="8 13 12 9 8 5"/><line x1="12" y1="9" x2="2" y2="9"/></svg>
        </td>
      </tr>
      <tr class="table-primary row">
        <td class="col-sm-2">No Icon in this row. </td>
      </tr>
    </tbody>
  </table>
</div>

htmlcssbootstrap-4icons

Answer №1

Try updating your css with the following changes:

        .custom_icon {
            width: 2em;
            height: 2em;
            vertical-align: middle;
        }
        tr{
            height: 40px;
        }
        td{
            padding: 0px 15px !important;
        }

Feel free to adjust as needed... it's been working flawlessly for me!

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

Answer №2

I am looking to ensure that all three rows in my table have the same height.

There isn't a CSS rule available that automatically adjusts row heights to match the tallest one.

However, this can be easily achieved with some JavaScript:

// Updating row heights to match the tallest row

document.querySelector('button').onclick = function() {

  // Selecting all row elements
  const trs = [...document.querySelectorAll('#my_div .row')];

  // Finding the maximum height of rows
  const maxRowHeight = trs.reduce((max, tr) => {
    return Math.max(max, tr.offsetHeight);
  }, 0);

  // Setting the height for all rows
  trs.forEach(tr => {
    tr.style.height = maxRowHeight + 'px';
  });

}
/* Original CSS rules from the question remain unchanged */
#my_div {
  line-height: 0.3;
}

.my_icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
<!-- HTML code as provided in the question remains unchanged -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<body class="p-2">
  <button class="btn btn-primary btn-sm">Resize Rows</button>

  <div class="container-fluid bg-info mt-2" id="my_div">
    <table class="table">
      <tbody>
        <tr class="table-primary row">
          <td class="col-sm-2=4">No Icon in this row. </td>
        </tr>
        <tr class="table-primary row">
          <td class="col-sm-4">Icon Row:
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-class my_icon"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
          </td>
        </tr>
        <tr class="table-primary row">
          <td class="col-sm-4">No Icon in this row. </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

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

Is it possible to fetch all the content contained within each set of <p> and </p> tags within a specific ID?

I've been trying to extract text between two specific <p> tags in HTML, but my code is only returning the text between a single tag. Here's what I have so far: > var myHTMLString = try String(contentsOf: myURL, encoding: .as ...

htmlswiftparsingtexttextview

Centered flex item with a flexbox grid underneath

Looking to create a layout with an intro section on the left side and a sidebar on the right within a container. Below the intro section, I want four divs evenly spaced like a grid. But I'm struggling with setting up this grid, possibly due to flexbo ...

htmlcssflexbox

"Step-by-step guide on integrating social media sharing features with Facebook and Twitter using Angular

I've been working on implementing a Facebook and Twitter share functionality in my Angular app, but I'm struggling to figure it out. After reading through the documentation here: https://developers.facebook.com/docs/sharing/reference/share-dialo ...

javascripthtmlangularfacebook

Code snippet in Python using Selenium where Google Maps is not visible in the page source

Currently, I am attempting to extract GPS coordinates data from a property listing: https://www.primelocation.com/new-homes/details/55357965?search_identifier=d10d089a335cc707245fb6c924bafbd2 The specific GPS coordinates can be found on the "Map & Nearby" ...

pythonhtmlseleniumweb-scraping

How can I override the maximum body width to enable specific div elements to extend beyond that limit?

While I've come across similar questions to mine, none of them seem to solve my specific issue. Essentially, I've set the body width to 960px, which is a common standard practice. However, there are certain elements such as header, footer, and so ...

htmlcss

Monitor Jenkins live logs with a personalized dashboard for real-time viewing

Our Jenkins CE is currently running close to 4000 jobs, with users accessing a Dashboard that utilizes Jenkins APIs. Previously, we provided an href link with a logs button for viewing logs, which would open the Jenkins logs page in an iFrame when clicked. ...

javahtmlreactjsjenkinsjenkins-plugins

Tips for aligning placeholder and text at the center in a React Material UI TextField

Existing Layout: https://i.stack.imgur.com/Zv4Tg.png Desired Layout: https://i.stack.imgur.com/Xuj6O.png The TextField element is displayed as follows: <TextField multiline={false} autoFocus placeholder={props.defaultAmt} ...

javascriptcssreactjsmaterial-uijsx

How can I position an element to the bottom right using CSS?

Is there a way to position this element to the bottom right corner? HTML <div class="info player"> <div id="job" style="display:none;"><span>Jobname</span></div> <div i ...

css

I'm having trouble figuring out how to activate the active state for a navigation bar

Having trouble changing the icons' state when they are clicked on. This navigation bar is being imported from different files. Here is my code for the navigation bar: .nav { position: fixed; top: 88%; left: 12.5%; right: 12.5%; width: 7 ...

htmlcss

How can you activate a checkbox by simply clicking anywhere on the row?

I am working with a list of checkboxes and currently, the user can only activate a checkbox by clicking directly on the checkbox itself. Is there a way to allow users to activate a checkbox by clicking anywhere in the same row as the checkbox? return( ...

javascripthtmlreactjstypescriptcheckbox

Cut an image using CSS while maintaining its original quality

I am currently working on an upload page where users can upload images. Here is the link to the page: MyPage. However, I would like to implement image cropping functionality that displays more of the image rather than just a small portion as it does now. A ...

htmlcss

My CSS seems to be causing issues and generating errors in the console. What could be the problem?

My CSS was working fine just 5 minutes ago, but now it's not working and I'm not sure what the issue is. I checked the console and found this error: bootstrap.min.js:6 Uncaught TypeError: Cannot read property 'fn' of undefined at bo ...

javascriptcssbootstrap-4

Transferring data between two HTML files through the POST method

Is there a way to pass two values (parameters) from one HTML page to another without displaying them in the URL, similar to using the POST method? How can I retrieve these values on the second HTML page using JavaScript, AJAX, or jQuery? For example: cli ...

javascriptjqueryhtmlajax

Changing the event when a class is active in Vue3

Question I am looking for a way to trigger an event when the 'active' class is added to an element. How can I achieve this? I believe this could potentially be accomplished using a watcher method, but I am unsure how to watch for the applicatio ...

javascripthtmlvue.jsvuejs3

Blazor Razor Component Library (RCL) Lacks CSS IntelliSense

I am encountering an issue with the CSS intellisense in my razor class library (RCL) that houses all the pages of my Blazor application. It appears that the CSS intellisense is not functioning within the RCL unless I modify the RCL .csproj xml tag From Sdk ...

c#cssrazorintellisense

What is the best location to place responsive mixins within Bootstrap 4 SCSS?

When it comes to adding responsive mixins in Bootstrap 4, where is the best place to place them? I've experimented with putting them in _custom.scss and mixins.scss, but unfortunately, they do not seem to work. I am utilizing the built-in mixins provi ...

twitter-bootstrapcsssassbootstrap-4

Vertical alignment of captions in Bootstrap 4 carousels

I need help centering the caption on my bootstrap 4 carousel. I've tried various methods like adding align-items-center, justify-content-center, and text-center to both carousel-item and carousel-caption, but nothing seems to work. body { overflo ...

htmlcssbootstrap-4

Is it possible to convert a Button into an input text field?

Hey there, I'm currently working on a project where I need to create a button that will transform into an input field and a submit button once clicked. I am utilizing React along with Bootstrap for this task. <div className="cold-md-2 col-sm- ...

javascripthtmlcssreactjsbootstrap-4

Changing the size of an input field in Bootstrap 4 by utilizing the input-group-append class

Currently, I am working on setting up a pay rate feature that includes two input boxes for numbers. However, I am facing an issue where the input boxes are stretching too much, causing the cents field to drop down to the next line. The Maxlength property ...

htmlcssinputbootstrap-4

Issue with AddToAny plugin not functioning properly on FireFox

I’m having issues with AddToAny for social media sharing on my website. It seems like FireFox is blocking it because of tracking prevention measures. Error Message in Console: The resource at “https://static.addtoany.com/menu/page.js” was blocked d ...

javascripthtmlfirefoxshare