Ricardo Pesciotta Ricardo Pesciotta -4 years ago 70
CSS Question

Bootstrap form - place inputs after an input-group fails

I have a problem which I think might be quite trivial, but it's costing me some time to solve, and I'm not sure if this is a known issue, or if I just can't get it right.

I have a bootstrap 3.3.6 form with .form-horizontal class.
I want to have several rows, containing a different number of input in every row. Problem occurs when I use an input-group (ie: an input group with an addon calendar button), after which no other inputs are displayed in the same line - the break to the next line.

To exemplify, I created a JSFiddle demonstrating the same line having the input-group as the last one in the row (Form2 - in which case it apparently looks fine), and the same row inverting the order of the inputs (Form1), so that the input-group is now in the middle, and the rendered results breaks the line, making everything that is after this input-group to be displayed in the line below.


  • Code:





<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form class="form-horizontal">
<h3>Form1</h3>
<div class="form-group">
<label for="input-name" class="col-sm-1 control-label">Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="input-name">
</div>

<label for="birthdate" class="col-sm-1 control-label">Birth</label>
<div class="input-group col-sm-1">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" id="birthdate">
</div>

<label for="age" class="col-sm-1 control-label">Age</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="age">
</div>
</div>
</form>

<form class="form-horizontal">
<h3>Form2</h3>
<div class="form-group">
<label for="input-name" class="col-sm-1 control-label">Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="input-name">
</div>

<label for="age" class="col-sm-1 control-label">Age</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="age">
</div>

<label for="birthdate" class="col-sm-1 control-label">Birth</label>
<div class="input-group col-sm-1">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" id="birthdate">
</div>

</div>
</form>






  • Screenshot:



screenshot of the sample form showing the incorrect rendering of input-group

I have seen many examples of similar solutions working, when the form has .form-inline, which is not what I need. I need it to be .form-horizontal, because I have several rows of input, not a single one.
Anyone has an experience with such an issue and know how to solve it?

Answer Source

Take off the class input-group from the dive surrounding the birthdate input. It isn't needed in this instance. If you insist on using it though, you can add the class pull-left.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download