CODEWITHSUNDEEP
cssforms
Gowire
Gowire

Reputation: 1060

Making buttons equally sized based on biggest button in HTML form

In the code sample below I have a simple form with two submit buttons. 

<form>
    <input type="submit" value="< Previous">
    <input type="submit" value="Next >">
</form>

Depending on the value attribute the buttons will get different sizes, like the image below:

enter image description here

Is there a method I can use to make the buttons equally sized based on the widest button? I use Bootstrap if that's any advantage...

I know that I could use a fix CSS-width (or similar) to set equal widths on the buttons. But since I don't know how wide the value will be in advance it won't solve the problem... (or will it?).

Upvotes: 0

Views: 182

Answers (1)

Shadow Fiend
Shadow Fiend

Reputation: 1829

Use JQuery

var prev = $('#prev').width();
var next = $('#next').width();
if (prev > next) {
  $('#next').width(prev);
} else {
  $('#prev').width(next);
}

Here is a jsfiddle I made..

Upvotes: 1

Related Questions