After testing in Chrome and seeing no issues, I noticed that the input field's position changes and there is spacing between the dropdowns when opening in Firefox.
View in Firefox browser:
https://i.stack.imgur.com/WYpuy.png
View in Chrome browser:
https://i.stack.imgur.com/SgeCd.png
$(document).ready(function() {
$(".js-example-basic-single").select2();
});.dob_m{
height: 34px; /* important */
width: 110px; /* important */
}
.dob_d{
height: 34px; /* important */
width: 65px; /* important */
}
.dob_y{
height: 34px; /* important */
width: 85px; /* important */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<form class="well form-horizontal" action="" method="post" id="user_edit">
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<select name="dob_day" id ="dob_day" class="dob_d js-example-basic-single ">
</select>
<select name="dob_month" id ="dob_month" class="dob_m js-example-basic-single ">
</select>
<select name="dob_year" id ="dob_year" class=" js-example-basic-single dob_y">
</select> <input type="hidden" name="dob" value="1" />
</div>
</div>
</div>
</form>
<script>
$(document).ready(function () {
var month = [], day = [], year = [];
for (var i = 1; i <= 12; i++) {
month.push(i);
}
for (var i = 1; i <= 31; i++) {
day.push(i);
}
for (var i = 1900; i <= (new Date().getFullYear()); i++) {
year.push(i);
}
$.each(day, function (index, d) {
$("#dob_day").append("<option>" + d + "</option>");
});
$.each(month, function (index, m) {
$("#dob_month").append("<option>" + m + "</option>");
});
$.each(year, function (index, y) {
$("#dob_year").append("<option>" + y + "</option>");
});
});
</script>Is there a way to ensure the consistent positioning of the fields across all browsers?