bootstrap input-group dynamic width

Question

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.

if I'am right you need the button to take 100% of the width ? — Yahya Essam, Dec 05 '16 at 16:31

score 1 · Answer 1 · answered Dec 05 '16 at 16:32

1

Try this:

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

answered Dec 05 '16 at 16:32

Johann Kratzik

764
5
11

I tried this with no luck. the input-group goes to 1 per line – rodney757 Dec 05 '16 at 17:23
Maybe I still don't understand. Do you want to put all input groups into 1 row? – Johann Kratzik Dec 05 '16 at 17:52
not necessarily. Currently each input-group is the same width. I don't want that. I want each input-group to be only as big as needed for the text and "X" button. I need to eliminate the extra whitespace in each input-group between the text and the "X" button. so the input-group. Thus the input group with the text "3" would not be as wide as the input-group with the text "And_one_more" – rodney757 Dec 05 '16 at 17:59

score 0 · Answer 2 · answered Dec 05 '16 at 16:36

0

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

answered Dec 05 '16 at 16:36

Yahya Essam

1,832
2
23
44

where should I add it? Doesn't seem to work in the buttons – rodney757 Dec 05 '16 at 17:23

score 0 · Answer 3 · answered Dec 05 '16 at 16:49

0

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

answered Dec 05 '16 at 16:49

Joint

1,218
1
12
18

this seems to make the input-group fill the entire div – rodney757 Dec 05 '16 at 17:22
Oh, now I unserstand what you want to achieve, you can't do this with only CSS or boostrap, all you need is this: http://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value – Joint Dec 06 '16 at 12:30

score 0 · Answer 4 · answered Dec 06 '16 at 13:16

0

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.

answered Dec 06 '16 at 13:16

rodney757

553
2
7
21

bootstrap input-group dynamic width

4 Answers4