Adjusting feedback icon position
← Examples
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.
Button group
<style type="text/css">
#buttonGroupForm .btn-group .form-control-feedback {
top: 0;
right: -30px;
}
#productForm .inputGroupContainer .form-control-feedback,
#productForm .selectContainer .form-control-feedback {
top: 0;
right: -15px;
}
#profileForm .form-control-feedback {
top: 35px;
right: 0px;
}
</style>
<form id="buttonGroupForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-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-xs-3 control-label">Languages</label>
<div class="col-xs-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>
<script>
$(document).ready(function() {
$('#buttonGroupForm').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
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'
}
}
}
}
});
});
</script>Input group
<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-xs-3 control-label">Price</label>
<div class="col-xs-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-xs-3 control-label">Amount</label>
<div class="col-xs-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-xs-3 control-label">Color</label>
<div class="col-xs-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-xs-3 control-label">Size</label>
<div class="col-xs-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>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'bootstrap',
icon: {
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'
}
}
}
}
});
});
</script>If changing the css positioning of the feedback icon isn't enough, you might have to look at the Showing icons in custom area example.