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
Post a Comment