css - Bootstrap: how to extend input to occupy available space? -
i created example: jsfiddle
<div class="container"> <div class="row"> <div class="span6"> <ul class="thumbnails"> <li class="span4"> <div style="height:200px; position: relative" class="thumbnail"> <div style="position: absolute; left: 5px; right: 5px; bottom:5px;"> <form style="margin:0;" class="form-inline"> <input style="margin: 3px 0 0 0;" type="text" placeholder="name…" ng-model="mashname" class="pull-left span3" /> <button type="submit" style="margin: 3px 0 0 0; " class="span1 btn btn-primary pull-right">create</button> </form> </div> </div> </li> </ul> </div>
what need input extend button, without using percentages screw when resizing. example near, button screwed using span..
.input-block-level
nice, extends way.. instead should stop before button. there way fix without javascript?
first need remove width bootstrap places on input field overriding width: auto
use absolute positioning give proper widths.. conform width of containing div.
i created jsfiddle of this: http://jsfiddle.net/w8yfl/
here code:
<div class="container"> <ul class="thumbnails"> <li class="span4"> <div style="height:200px; position: relative" class="thumbnail"> <div style="position: absolute; left: 5px; right: 5px; bottom:5px;"> <form style="margin:0;" class="form-inline"> <input style="position: absolute; right: 70px; left: 0; bottom: 0; width: auto;" type="text" placeholder="name…" ng-model="mashname"/> <button type="submit" style="position: absolute; right: 0; bottom: 0;" class="btn btn-primary">create</button> </form> </div> </div> </li> </ul> </div>
Comments
Post a Comment