I'm having a problem with bootstrap feedback. form-control-feedback
when used with dropdownlist it doesn't align properly. Like I want it to show in the right corner after dropdownlist like it does in IE 11 (below screencast). It's kinda working in IE11 but not in all other browsers (Firefox,Chrome,Safari). I did little bit of googling and didn't find any sound workaround/solution and not sure whether its a bug or the way they intended.
Created a fiddle here http://jsfiddle.net/12qcwbbw/.
It seems this css rule .has-feedback .form-control{padding-right: 42.5px;}
works only in IE11.
Here are screen-casts;
This is what it is rendering on IE 11 and that's I want in other browsers.
Firefox
Google Chrome
Safari
Here's my html;
<div class="form-horizontal middle" >
<div class="col-xs-12 col-sm-12">
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label">Full Name</label>
<div class="col-xs-12 col-sm-9 has-feedback" >
<input type="text" class="form-control text-capitalize" name="FullName" id="txtFullName"
placeholder="Full Name" />
<span class="glyphicon glyphicon-remove text-danger form-control-feedback">
</span>
</div>
</div>
<div class="form-group ">
<label class="col-xs-12 col-sm-3 control-label">Gender</label>
<div class="col-xs-12 col-sm-9 has-feedback">
<select class="form-control">
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<i class="glyphicon glyphicon-remove text-danger form-control-feedback"></i>
</div>
</div>
</div>
Any workaround is appreciated!
There is not a cross browser solution for this since every browser renders the <select>
element in a different way (and via CSS we have very limited control over it), but there is one alternative that could suit you.
I use CSS trick to make <select>
elements be visually similar to all browsers. Its logic is really simple, it places an additional <div>
that wraps the <select>
that has an arrow image as background that mimics the arrows that a <select>
has.
See the snippet below:
.select-style {
padding: 0;
margin: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background: #fff url('data:image/gif;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==') no-repeat calc(100% - 10px) 50%;
}
.select-style select {
padding: 5px 8px;
width: 100%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: rgba(0, 0, 0, 0.6);
}
<div class="select-style">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
Using the above trick I made an adjustment for your scenario, which is a <select>
element inside a .has-feedback
element.
Change the background
property for the .select-style` rule to change the position of the arrow icon.
.form-control + .form-control-feedback {
right: 12px;
}
.select-style {
padding: 0;
margin: 0;
border: 0 solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff url('data:image/gif;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==') no-repeat calc(100% - 30px) 50%;
}
.select-style select {
padding: 5px 8px;
width: 100%;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: rgba(0, 0, 0, 0.6);
}
.input-group > .select-style {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="form-group has-feedback has-error">
<label for="myselect">A label</label>
<div class="select-style">
<select id="myselect" class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<span class="glyphicon form-control-feedback glyphicon-remove"></span>
</div>
<div class="form-group has-feedback has-error">
<label for="myselect2">A label</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-tag"></span>
</div><div class="select-style">
<select id="myselect2" class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<span class="glyphicon form-control-feedback glyphicon-remove"></span>
</div>
</div>
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