CODEWITHSUNDEEP
jqueryhtmlcssangularjstwitter-bootstrap
Sikandar Sahab
Sikandar Sahab

Reputation: 708

Bootstrap select options are hiding due to size of select element

I have a populated bootstrap select tag, looks like:

enter image description here

working perfectly, showing all items to select.

BUT when I decrease the height of select using css, it displays like this:

enter image description here The options are being populated but hidden down, just because I added this CSS:

#selectOption {
    font-size: 12px;
    height: 20px;
}

so please guide me through how do I force the options to show with this height?

Providing full code for 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 );
            }
        });
    }

Upvotes: 0

Views: 407

Answers (1)

Marcel Schmid
Marcel Schmid

Reputation: 424

I guess it is because by default bootstrap hast a padding on selects.

so that padding pushs your text to the bottom and this way its not shown.

Just add

#selectOption {
   font-size: 12px;
   height: 20px;
   padding-top:0;
   padding-bottom:0;
}

this should do the trick

Upvotes: 2

Related Questions