我有一个填充的 Bootstrap 选择标签,看起来像:
完美运行,显示所有要选择的元素。
但是 当我使用 css 降低选择的高度时,它显示如下:
#selectOption {
font-size: 12px;
height: 20px;
}
所以请指导我如何强制选项以这个高度显示?
Providing full code for select option and controller:
选择选项
<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 );
}
});
}
最佳答案
我想这是因为默认情况下 bootstrap 在选择时有一个填充。
这样填充会将您的文本推到底部,这样它就不会显示。
只需添加
#selectOption {
font-size: 12px;
height: 20px;
padding-top:0;
padding-bottom:0;
}
这应该可以解决问题
关于jquery - 由于选择元素的大小,Bootstrap 选择选项被隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48687183/