我在标题下方有一个选择框。 Header 是固定在页面顶部的页眉。当我点击它并选择第一个选项时,它显示得很好。(无法添加更多链接,因为我没有太多声誉)
假设我选择了第二个选项。现在,当我单击选择框以更改选项时,选项列表的顶部位于固定标题后面。
我应该使用什么 css 样式来正确显示选项列表。
我正在使用 bootstrap 3,选择框来自 Angular 形 Material 。
现在我使用非常高的 z-index 值来显示它。
下面是header的代码
<header id="header" class="header">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#/dashboard" ng-if="location.path() != '/welcome'"><h3>RentedRoofs</h3></a>
<a class="navbar-brand" href="#login" du-smooth-scroll ng-if="location.path() == '/welcome'"><h3>RentedRoofs</h3></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav" ng-show="location.path() != '/welcome'">
<li ng-class="{active: location.path() == '/dashboard'}">
<a href="/#/dashboard">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" ng-show="location.path() == '/welcome'">
<li>
<a href="#login" du-smooth-scroll>Login</a>
</li>
<li>
<a href="#howItWorks" du-smooth-scroll>Know How</a>
</li>
<li>
<a href="#contact" du-smooth-scroll>Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" ng-show="location.path() != '/welcome'">
<li ng-click="logout()">
<a > Logout </a>
</li>
</ul>
</div>
</div>
选择框代码
<div class="container">
<div class="row text-center">
<md-input-container ng-if="owner.allProperties.length > 1" ng-class="{'big-centered': !owner.selectedProperty}">
<md-select placeholder="Select Property To View Details" ng-model="owner.selectedProperty">
<md-option ng-repeat="property in owner.allProperties" ng-value="property">
{{getAddressString(property.address)}}
</md-option>
</md-select>
</md-input-container>
</div>
</div>
CSS类
.big-centered{
font-size: 1.7em;
margin-top: 20%;
}
为了更清楚,我创建了 codepen 演示 demo 产生问题。选择状态。然后选择AZ。然后再次单击选择框现在您将看到隐藏的 AL。
最佳答案
老实说,您不应该混合 Bootstrap 和 Angular Material 。 Angular Material 中已经有一个工具栏指令可以防止这种情况发生。
<div ng-controller="AppCtrl as ctrl" class="md-padding selectdemoBasicUsage" ng-cloak="" ng-app="MyApp">
<div>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Toolbar things</h2>
</div>
</md-toolbar>
<md-content>
<div layout="row">
<md-input-container>
<label>State</label>
<md-select ng-model="ctrl.userState">
<md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">
{{state.abbrev}}
</md-option>
</md-select>
</md-input-container>
</div>
</md-content>
</div>
</div>
关于css - 如何定位选择框的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34954703/