In some cases, the feedback icons aren't shown properly. By default, Bootstrap defines feedback icon position as following:
.has-feedback .form-control-feedback {
top: 25px;
right: 0;
}
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}
By customizing the value of top
and right
properties, you can adjust the feedback icon to deserved position.
Below is some popular usages.
<style type="text/css">
#buttonGroupForm .btn-group .form-control-feedback {
top: 0;
right: -30px;
}
</style>
<form id="buttonGroupForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="gender" value="male" /> Male
</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="female" /> Female
</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Languages</label>
<div class="col-lg-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="languages[]" value="english" /> English
</label>
<label class="btn btn-default">
<input type="checkbox" name="languages[]" value="german" /> German
</label>
<label class="btn btn-default">
<input type="checkbox" name="languages[]" value="french" /> French
</label>
<label class="btn btn-default">
<input type="checkbox" name="languages[]" value="russian" /> Russian
</label>
<label class="btn btn-default">
<input type="checkbox" name="languages[]" value="italian"> Italian
</label>
</div>
</div>
</div>
</form>
$(document).ready(function() {
$('#buttonGroupForm').bootstrapValidator({
excluded: ':disabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
'languages[]': {
validators: {
choice: {
min: 1,
max: 2,
message: 'Please choose 1 - 2 languages you can speak'
}
}
}
}
});
});
<style type="text/css">
#productForm .inputGroupContainer .form-control-feedback,
#productForm .selectContainer .form-control-feedback {
top: 0;
right: -15px;
}
</style>
<form id="productForm" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Price</label>
<div class="col-lg-3 inputGroupContainer">
<div class="input-group">
<input type="text" class="form-control" name="price" />
<span class="input-group-addon">$</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Amount</label>
<div class="col-lg-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon">€</span>
<input type="text" class="form-control" name="amount" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Color</label>
<div class="col-lg-3 selectContainer">
<select class="form-control" name="color">
<option value="">Choose a color</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="white">White</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Size</label>
<div class="col-lg-3 selectContainer">
<select class="form-control" name="size">
<option value="">Choose a size</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
</div>
</div>
</form>
$(document).ready(function() {
$('#productForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
amount: {
validators: {
notEmpty: {
message: 'The amount is required'
},
numeric: {
message: 'The amount must be a number'
}
}
},
color: {
validators: {
notEmpty: {
message: 'The color is required'
}
}
},
size: {
validators: {
notEmpty: {
message: 'The size is required'
}
}
}
}
});
});
<style type="text/css">
#profileForm .form-control-feedback {
top: 35px;
right: 0px;
}
</style>
<form id="profileForm">
<div class="form-group">
<label>Email address</label>
<input type="text" class="form-control" name="email" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" />
</div>
</form>
$(document).ready(function() {
$('#profileForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The email address is not valid'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
});