A have a form in a table, and all my field sizes are fitting well. But I have one datefield that has an .input-group-addon, an that is making the size control not work very well. Is there a way to fix it?
I tried some ways to make a smaller input, but the addon stopped being attached: http://jsfiddle.net/93MpC/1/
The code from Fiddle:
<div class="table-responsive">
<table class="table table-bordered">
<tr class="form-group">
<td><label class="field-label required-field">Name:</label></td>
<td><div class="input-group">
<input type="text" name="name" required id="id_name" class="form-control">
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group">
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group"><div class="row">
<div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group">
<div class="row">
<div class="col-lg-3">
<div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div>
<div class="col-lg-1"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
</div>
</div>
</div></td>
</tr>
</table>
</div>
Thanks in advance!
Taken from your code, I added a class half to the parent div. Here's the css:
.half {
width: 50%;
}
And the HTML (almost the same):
<div class="input-group half"><!-- here is .half -->
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Edit Or if you want to use col here's a different option:
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-3">Birthdate:</div>
<div class="col-md-9">
<div class="input-group">
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Example
The proper HTML for this requires another level of nesting. More information can be found in the input groups documentation.
The <td>
with your sized input and addon should look like this:
<td class="row">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</td>
The .col-*
classes add padding left and right, so if that's a problem you can remove it with a little bit of CSS.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With