As you can see in the picture the height gets all crazy when I add a label element to the form-group I'm using Bootstrap 3.7
here is my HTML
<div class="form-group date input-group {{ $errors->has('medical_date_test') ? 'has-error' : ''}}">
<label>Medical date test <span class="required">*</span></label>
<input type="text" class="form-control" name="medical_date_test" value="{{ old('medical_date_test') }}">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
here is a JSFiddle
https://jsfiddle.net/0d2a0kzr/
you just need to put a label outside the div class "form-group https://jsfiddle.net/j1aw98jm/2/
<label>Medical date test <span class="required">*</span></label>
<div class="form-group date input-group">
<input type="text" class="form-control" name="medical_date_test">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
Related
Using BS4 the custom switch/checkbox can be added to the form. Unfortunately - the small (-sm) modification wont work. I attach a code sample and an image.
https://www.codeply.com/p/gZuRjGvqG2
What I want to achieve is to get the switch become as small (in height) as the input field itself. I cannot find "custom-control-sm" or similar class, and form-control-sm wont work.
<div class="input-group input-group-sm">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-table"></i>
</span>
</span>
<span class="input-group-prepend">
<span class="input-group-text">
<span class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input form-control-sm" aria-autocomplete="none" autocomplete="off" id="DefineAttributes" name="DefineAttributes" title="Define the attributes" value="true">
<label class="custom-control-label form-control-sm" for="DefineAttributes"></label>
</span>
</span>
</span>
<input type="text" class="form-control" aria-autocomplete="none" autocomplete="off" id="Attributes" name="Attributes" placeholder="Attributes ..." value="something">
<span class="input-group-append">
<a class="btn btn-sm btn-outline-primary " title="Select attributes" href="#">Select</a>
</span>
</div>
Had to do the following changes:
Add p-0 to <span class="input-group-text"> (the one for the checkbox).
Add "style=height: 0;" to <input type="checkbox" ... & <label class="custom-control-label ... to remove any height the invisible element has.
Adjust the position of the resultant slider with custom margins on the <span class="custom-control custom-switch">, i.e., added: "style="margin-left: 24px; margin-right: -12px;"
This should result in a proper looking slider, and in the sm size.
Please help me out, after adding the extra input-group-addon I am losing the markup of this form field. I would also like to have the chevron icon moved to the end of the form field instead of the input-group-addon. Even the label is now in the wrong position.
<?php
<div class="col-md-6">
<div class="input-group has-success has-feedback" id="add_km_tarief_div">
<label for="add_km_tarief_div">Tarief</label>
<span class="input-group-addon">€</span>
<input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
<span class="input-group-addon">p/km</span>
<span class="glyphicon glyphicon-ok form-control-feedback" id="add_km_tarief_glyp"></span>
</div>
</div>
?>
Try With This
<div class="col-md-6">
<div class="input-group has-success has-feedback" id="add_km_tarief_div">
<label for="add_km_tarief_div" class="addyourclassname">Tarief</label>
<span class="input-group-addon">€</span>
<input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
<span class="input-group-addon">p/km</span>
<span class="glyphicon glyphicon-ok form-control-feedback addyourownclass" id="add_km_tarief_glyp"></span>
</div>
</div>
Css:
.addyourclassname{float:left}
.addyourownclass{float: left;
position: relative;
top: 0;}
I have currently 2 input fields on the same line to be validated with vee-validate (I am using Vue.js).
The validation message is displayed at the end of the input-group, not inside it.
Here is the html code:
<div class="form-group row d-flex justify-content-center">
<div class="input-group input-group-lg col-md-3" >
<input v-validate="'required'" name="username" v-model="username" type="text" class="form-control" placeholder="Your Name" aria-label="Name">
<span v-show="errors.has('username')" class="help is-danger">{{ errors.first('username') }}</span>
</div>
<div class="input-group input-group-lg col-md-4" >
<input v-validate="'required|email'" name="email" v-model="email" type="text" :class="{'input': true, 'is-danger': errors.has('email') }" class="form-control" placeholder="Your Email Address" aria-label="Email">
<span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
</div>
</div>
What's wrong with my code?
Use Bootstrap .help-block class in your error text.
When using the Bootstrap has-feedback icon combined with an label the icon is displayed in there same horizontal line as the label instead of in the form field.
When I remove <label for="bedr_naam">Bedrijfsnaam</label> it is set correctly.
Any suggestions?
<div class="container">
<div class="col-md-5">
<div class="form-group has-warning" id="div_bedrijfsnaam">
<label for="bedr_naam">Bedrijfsnaam</label>
<input type="text" class="form-control" id="bedrijfsnaam" name="bedrijfsnaam" value="'.$row['bedrijfsnaam'].'" onkeyup="validate()" onclick="validate()"><span class="glyphicon glyphicon-warning-sign form-control-feedback" id="bedrijfsnaam_status">
</div>
</div>
This is example from documentation:
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
Look carefully, your div#div_bedrijfsnaam does not have has-feedback class and label without control-label class
What I have done here is use the standard Bootstrap grid system of .col-md-5 and .col-md-7 under .row to place all the element on 1 row but I can't seem to make it work.
Another thing is the element keeps getting pulled down to another line below the input.
<div class='col-md-12'>
<div class='row'>
<div class='col-md-5'>
<select class='form-control'>
<option value='us'>USA</option>
</select>
</div>
<div class='col-md-7'>
<span class="" style="display: inline">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
<a href='#' class=''>
cancel
</a>
</span>
</div>
</div>
</div>
How can I put all these onto 1 line?
Here's a jsfiddle for it: http://jsfiddle.net/2656xt63/
There's nothing wrong with your bootstrap column classes, but the elements will only appear side by side on md screen widths (>= 992px). The fiddle panel is narrower than that so the elements are stacked.
If you use col-xs-* the elements will appear side by side at all times.
Alternatively, for a small form such as this, you could use an inline form:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="country">Country</label>
<select class='form-control' id="country">
<option value='us'>USA</option>
</select>
</div>
<div class="form-group">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
</div>
<div class="form-group">
<a href="#" class="btn btn-default">
cancel
</a>
</div>
</form>
Here's a bootply demonstrating the inline form.