I am encountering an issue with a populated bootstrap select tag. Initially, it looks like this:
https://i.sstatic.net/1PWOf.png
It is working perfectly fine, displaying all items for selection.
However, when I decrease the height of the select using CSS, it appears like this:
https://i.sstatic.net/9dhOu.png The options are being populated but hidden below, due to the addition of this CSS:
#selectOption {
font-size: 12px;
height: 20px;
}
Can someone please advise me on how to make the options visible within this reduced height?
Providing the complete code for the select option and controller:
Select option
<div class="col-sm-3">
<fieldset class="form-group">
<label id="fieldTitle">Appointment Type</label>
<select id="selectOption" ng-model="frieghtSale.apptType" ng-
options="type.code as type.value for type in appointmentTypes"
class="form-control input-sm" required data-error="Please select
appointment type">
<option value="" disabled>Select Appointment Type</option>
</select>
<div class="help-block with-errors"> {{freightSale.apptType}} </div>
</fieldset>
</div>
AngularJS Controller
$scope.populateAppointmentTypes = function() {
$.ajax({
url: someURL/common/dropdown?typ=ApptType',
dataType: 'JSON',
success: function(data) {
$scope.appointmentTypes = data;
}, error: function(error) {
console.log( "Could not populate appointment types: " + error );
}
});
}