How can I implement input-lg class in a select2 dropdown? I wan't my dropdown to have the same size as an input element having a class of input-lg here's what I have so far
<div class="col-sm-4">
<label for="mobile" class="control-label"><span class="text-danger">*</span> Nationality</label>
<input type="text" id="nationality" name="nationality" class="form-control input-lg" />
</div>
<div class="col-sm-4 padding-minimum">
<label for="mobile" class="control-label"><span class="text-danger">*</span> Gender</label>
<select name="gender" id="gender" class="form-control select2-container input-lg step2-select" data-placeholder="Select Gender">
<option></option>
<option value="1">Male</option>
<option value="0">Female</option>
</select>
</div>
And here is my script
<script>
$(document).ready(function(){
$('select').select2();
});
</script>
But It seems that once initialized the dropdown is not the same size as an input field having a class of input-lg eventhough I placed a class of input-lg on my select element. Any idea on how to implement this? I just want the select2 to have the same height as the input field
I'm using select2 version 4.0.0 and the css is version 3.5.2 I think
To make select
equal in height of input, make following changes in CSS and remove input-lg
selector from <select>
it's unnecessary and no use of it
$(document).ready(function () {
$('select').select2();
});
.select2-container--default .select2-selection--single {
height: 46px !important;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
top: 85% !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 26px !important;
}
.select2-container--default .select2-selection--single {
border: 1px solid #CCC !important;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" />
<div class="col-sm-4">
<label for="mobile" class="control-label"><span class="text-danger">*</span> Nationality</label>
<input type="text" id="nationality" name="nationality" class="form-control input-lg" />
</div>
<div class="col-sm-4 padding-minimum">
<label for="mobile" class="control-label"><span class="text-danger">*</span> Gender</label>
<select name="gender" id="gender" class="form-control select2-container step2-select" data-placeholder="Select Gender">
<option></option>
<option value="1">Male</option>
<option value="0">Female</option>
</select>
</div>