由于选择元素的大小，引导选择选项被隐藏答案

【问题标题】：Bootstrap select options are hiding due to size of select element由于选择元素的大小，引导选择选项被隐藏
【发布时间】：2018-07-19 02:57:21
【问题描述】：

我有一个填充的引导选择标签，看起来像：

完美运行，显示所有要选择的项目。

但是当我使用 css 降低选择的高度时，它显示如下：

选项正在填充但隐藏起来，只是因为我添加了这个 CSS：

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

那么请指导我如何强制选项以这个高度显示？

为选择选项和控制器提供完整代码：

选择选项

<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 控制器

$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 );
            }
        });
    }

【问题讨论】：

标签： jquery html css angularjs twitter-bootstrap

【解决方案1】：

我猜这是因为默认情况下引导程序在选择上有一个填充。

这样填充将你的文本推到底部，这样它就不会显示出来了。

只需添加

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

这应该可以解决问题

【讨论】：

工作。谢谢你。我会在 10 分钟后接受你的回答。