Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

twitter bootstrap 3 input-group-addon not all the same size

Basically I have a couple of input fields which have a span prepended with some text. When I try to set col-lg-4 and col-lg-8 on the input-group-addon and the input field itself, it doesn't do what I expected it to do and resize them.

<div class="input-group">
   <span class="input-group-addon">some text</span>
   <input type="text" class="form-control" id="current_pwd" name="current_pwd" />
</div>

Can anyone help me getting the input-group-addon get the same size?

I've created a fiddle here: http://jsfiddle.net/Dzhz4/ that explains my problem.

Anyone that can shed some light please?

like image 927
J.Pip Avatar asked Aug 06 '13 08:08

J.Pip


2 Answers

try this

http://jsfiddle.net/Dzhz4/1/

.input-group-addon {
    min-width:300px;// if you want width please write here //
    text-align:left;
}
like image 63
Falguni Panchal Avatar answered Nov 08 '22 06:11

Falguni Panchal


.input-group-addon { width: 50px; } // Or whatever width you want

.input-group { width: 100%; }

The first part sets the width of your addons, the second forces the inputs to take up all of their parent container.

like image 37
rictionaryFever Avatar answered Nov 08 '22 06:11

rictionaryFever