Make form labels inside columns the same height in the same row

user_17646355 0
Viewed 197

I am trying to style a form that uses bootstrap rows and columns. I want the labels above the form input to all be the same height so the inputs line up regardless how many lines the label is. The reason I dont just align the content of each column to the bottom is because sometimes there will be a message underneath the input. I know how to make all of the columns the same height within a row, but is there a way to make an element inside of that column the same height as matching elements in other columns? I cannot put the labels on their own row, otherwise the forms would not be responsive.

Here is an example of what I'm working with

<div class="container">
  <div class="row">
    <div class="col-3">
      <label for="dropDown">Field Label</label>
      <select id="dropDown" name="dropDown" class="">
        <option value=""></option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-3">
      <label for="textBox1" class="required">Required Item - this is a sample of a longer title</label>
      <input type="text" id="textBox1" name="textBox1" class="" />
      <span id="termsError" class="error-box">Error</span>
    </div>
    <div class="col-3">
      <label for="textBox3">Numeric Input (disabled)</label>
      <input type="number" id="textBox3" name="textBox3" value="44.34" disabled="disabled" class="align-right">
      <span id="termsError" class="warning-box">Warning</span>
     </div>
    <div class="col-3">
      <label for="textBox4">Date Picker</label>
      <input type="date" id="textBox4" name="textBox4" class="" />
      <span id="termsError" class="info-box">Info</span>
    </div>
  </div> 
</div>

https://jsfiddle.net/bendorf_07/8nda4ujk/3/

bootstrap-5 forms label
1 Answers

You can achieve this with add height on labels by using javascript. Find the biggest height of the labels and make them all at the same height like the largest.

$(window).on("load resize",function(){
    $('label').height(''); //Remove height first on resizing
    var heights = $("label").map(function() {
            return $(this).height();
        }).get();
        
    maxHeight = Math.max.apply(null, heights);
        
    $("label").css("height", maxHeight);
});

https://jsfiddle.net/2qce68yv/

user_19231390
Related