选择下拉菜单值是IE中的重叠下拉列表,在firefox / chrome中正常工作

时间:2018-05-04 09:54:39

标签: css

这是我的html代码,当我点击下拉值时,重叠下拉菜单而不是下方的下拉菜单。

<th class="col-xs-1 subheader-table-color" style="width: 12.33% !important;">
                                     <span style="float: left; width: 40px;">
                                <select ng-model="filters.projectAgeOperator" style="border-radius: 4px !important;" class="select-WidHeight ng-pristine ng-untouched ng-valid dropdown ng-empty" uib-dropdown="">
                                 <option value=""></option>
                                        <option value="eq">=</option>
                                        <option value="lt">&lt;</option>
                                        <option value="gt">&gt;</option>
                                </select>
                                </span>
                                <span style="float: left; width: 67px;margin-left: 7px;"><input class="filters form-control input-sm ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern" id="inputAge" ng-pattern="/^[0-9]*$/" ng-model="filters.projectAge" style="width: 69px !important;" type="text"></span>
                                <br>

                                <p class="help-txt-table col-sm-12 noPad ng-hide" ng-show="dashboardData.userPreferences.showHelpTextEnabled" ng-class="{'no-display': !settingsForm.helpTxtOn}" style="margin-top:5px;margin-bottom:5px;">Filter by age</p> 
                            </th>

1 个答案:

答案 0 :(得分:0)

请查看以下示例

  $("select").select2({
 placeholder: "",
  minimumResultsForSearch: Infinity
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://select2.github.io/select2/select2-3.5.3/select2.js"></script>
 <link rel="stylesheet" type="text/css" href="http://select2.github.io/select2/select2-3.5.3/select2.css">
<th class="col-xs-1 subheader-table-color" style="width: 12.33% !important;">
                                     <span style="float: left; width: 40px;">
                                <select ng-model="filters.projectAgeOperator" style="border-radius: 4px !important;" class="select-WidHeight ng-pristine ng-untouched ng-valid dropdown ng-empty" uib-dropdown="">
                                 <option value=""></option>
                                        <option value="eq">=</option>
                                        <option value="lt">&lt;</option>
                                        <option value="gt">&gt;</option>
                                </select>
                                </span>
                                <span style="float: left; width: 67px;margin-left: 7px;"><input class="filters form-control input-sm ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern" id="inputAge" ng-pattern="/^[0-9]*$/" ng-model="filters.projectAge" style="width: 69px !important;" type="text"></span>
                                <br>
Please check below example 
                                <p class="help-txt-table col-sm-12 noPad ng-hide" ng-show="dashboardData.userPreferences.showHelpTextEnabled" ng-class="{'no-display': !settingsForm.helpTxtOn}" style="margin-top:5px;margin-bottom:5px;">Filter by age</p> 
                            </th>