Controvi Controvi - 4 months ago 10
HTML Question

Keep multiple elements same hight and verticalu aligned

I am struggling with a challenge in a project I am working on.

JSFiddle example

I want to have all the buttons the same height.
when on a large screen they are all good.
But when i start to scale down they start getting different heights.
And this is an expected result.

But the people that are pulling the strings on this page want all buttons to be the same height.
When one text goes to the next line and makes the button bigger every button most get the same height.

this goes for all widths of the viewport.

I hope you can help me with this challenge.
For any more info I will update the question as soon as possible.

PS. I don't want to use CSS3 for this as it want to keep the Backwards Compatibility as high as possible.

because i have to add code here, this is the situation of my html.




<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<a href="#" class="button button-primary bpanelbutton">This is a short text</a>
</div>

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<a href="#" class="button button-primary bpanelbutton">This is a long text like this</a>
</div>

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<a href="#" class="button button-primary bpanelbutton">This is a long text that is even longer tha the previous button</a>
</div>

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<a href="#" class="button button-primary bpanelbutton">This is a short text</a>
</div>
</div>

</div>

Answer

This is a basic jQuery code I wrote for a similar project:

 var eqheight = 0; 
 $('.col-eqheight-sm').each(function() {
     if( $(this).outerHeight() > eqheight) {
        eqheight = $(this).height();
     }
  });
  $('.col-eqheight-sm').height(eqheight);

It loops through each child and updates the height accordingly.

P.S Advised to wrap it inside a viewport width checker if you only want to work for specific resolutions. Also, add a window resize listener if you want it to update each time the viewport changes.