CODEWITHSUNDEEP
csstwitter-bootstrap
naXa stands with Ukraine
naXa stands with Ukraine

Reputation: 37916

Bootstrap `input-group-addon` is far from input when `width: auto` is set

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script type="application/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<form id="form1" class="well form-horizontal" action="/base_url/update" method="POST">
<div class="form-group">
  <label class="col-sm-2 control-label" for="input1">Field 1</label>
  <div class="col-sm-10 input-group">
    <input style="width:auto" id="input1" min="0" name="input1" class="form-control" maxlength="20" value="0" type="number">
    <span class="input-group-addon">sm<sup>3</sup></span>
  </div>
</div>
</form>

How to make the input-group-addon to appear near the input?

Upvotes: 2

Views: 574

Answers (2)

Jeremy Blalock
Jeremy Blalock

Reputation: 2619

This is happening because Bootstrap is expecting the input to fill up the "remaining space". If you want adjust the width of the textfield, you should change the width of .input-group instead of the input.

As an example:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script type="application/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<form id="form1" class="well form-horizontal" action="/base_url/update" method="POST">
  <div class="form-group" style="width: 200px">
    <label class="col-sm-2 control-label" for="input1">Field 1</label>
    <div class="col-sm-10 input-group">
      <input id="input1" min="0" name="input1" class="form-control" maxlength="20" value="0" type="number">
      <span class="input-group-addon">sm<sup>3</sup></span>
    </div>
  </div>
</form>

Upvotes: 2

timgavin
timgavin

Reputation: 5166

remove style="width:auto" from the element

<input id="input1" min="0" name="input1" class="form-control" maxlength="20" value="0" type="number">

Bootstrap handles that for you anyway, so there's no reason to put it inline. :)

Upvotes: 0

Related Questions