Using input-block-level with input-prepend in Twitter Bootstrap 2.3.2 -


i'm wondering how make input field fill available width input-prepend icons in twitter bootstrap 2.3.2 responsive layout?

there css style in bootstrap input-block-level witch works fine until prepend input icon... how same functionality prependet input?

<div class="control-group">   <label class="control-label" for="inputicon">email address</label>   <div class="controls">     <div class="input-prepend ">       <span class="add-on"><i class="icon-envelope"></i></span>       <input class="span2" id="inputicon" type="text" class="input-block-level">     </div>   </div> </div> <div class="control-group">     <label class="control-label" for="inputpassword">password</label>     <div class="controls">       <input type="password" id="inputpassword" placeholder="password" class="input-block-level">     </div> </div> 

here example of code illustrating problem : http://jsfiddle.net/r3cyl/

you need add little css

demo jsfiddle

.input-prepend.input-block-level {   display: table;  } .input-prepend.input-block-level .add-on {   display: table-cell; } .input-prepend.input-block-level > input {   width: 100%; } 

you add border color input-prepend.input-block-level .add-on { improve it's appearance.

input-prepend.input-block-level .add-on {     display: table-cell;     border-right: #fff; } 

edited

another more involved way of doing it. bootstrap aproved.

demo jsfiddle

.input-append.input-block-level, .input-prepend.input-block-level {   display: table; }  .input-append.input-block-level .add-on, .input-prepend.input-block-level .add-on {   display: table-cell;   width: 1%; /* remove if want default bootstrap button width */ }  .input-append.input-block-level > input, .input-prepend.input-block-level > input {   box-sizing: border-box; /* use bootstrap mixin or include vendor variants */   display: table; /* table-cell not working in chrome small widths */   min-height: inherit;   width: 100%; }  .input-append.input-block-level > input {   border-right: 0; }  .input-prepend.input-block-level > input {   border-left: 0; } 

Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -