CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
rodney757
rodney757

Reputation: 583

bootstrap input-group dynamic width

How can I make bootstrap input-group input element width dynamic? I tried setting width: auto; but the input-group still seems to have a set width.

<form class="col-sm-12 form-horizontal">
<div class="col-sm-6">
  <ul class="form-group list-inline list-unstyled">
    <li class="" ng-repeat="item in items">
      <div class="input-group list-item">
        <input type="text" readonly="" class="form-control" value="{{item}}" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="removeExpedition(item)">
            <span class="glyphicon glyphicon-remove"></span>
          </button>
        </div>
      </div>
    </li>
  </ul>
</div>
</form>

and css:

.list-item>.input-group-btn {
    width: auto;
}

Here is a plunker to demonstrate. See all the whitespace between the input and button. I would like to have the button right next to the input element, with a set padding.

Upvotes: 0

Views: 2202

Answers (4)

rodney757
rodney757

Reputation: 583

okay, so I was able to do this by using a btn-group instead of an input-group. The input was being used only to show a value, so it wasn't necessary. btn-group by default is only a wide as the text it includes.

Upvotes: 0

Joint
Joint

Reputation: 1218

Add to li elements style display: block and add to div.input-group class btn-block that's all

Upvotes: 0

Yahya Essam
Yahya Essam

Reputation: 1912

there is built in class in bootstrap to do this. just give the button class ( btn-block )

Upvotes: 0

Johann Kratzik
Johann Kratzik

Reputation: 794

Try this:

.list-inline > li, .input-group {
    width: 100%;
}

Upvotes: 1

Related Questions