How to get inputs with append / prepend to have matching widths with twitter bootstrap

Question

Is there a way to have inputs that have append and/or prepend to all have matching widths?

Here's an example, but you can see that given multiple inputs with appends/prepends of various lengths, the will all end up being different widths, and it won't look very good.

http://jsfiddle.net/PLkfq/1/

Answer 1

If you want to be pixel precise, forget classes and apply style to ids

add an id to the minutes span

<span id="minutes" class="add-on">minutes</span>

and use this bit of css

#service_name{width:200px;}
#service_duration{width:130px;}
#minutes{width:70px;}

http://jsfiddle.net/baptme/PLkfq/4/

Answer 2

you can use jQuery:

$(document).ready(function(){
 var normal_width = $("#service_name").width();
 var add_on = $(".add-on").width();
 var after_width = normal_width-add_on+3;
 $("#service_duration").width(after_width);
});

by this method you can set any size for your inputs

http://jsfiddle.net/PLkfq/25/