Как установить параметры окна выбора

Question

У меня есть поле выбора под заголовком. Заголовок содержит фиксированный заголовок в верхней части страницы. Когда я нажимаю на него, и когда выбирается первый вариант, он отображается хорошо (не могу добавить ссылку, поскольку у меня нет большой репутации)

Допустим, я выбрал второй вариант. Теперь, когда я нажимаю на поле выбора, чтобы изменить вариант, верхняя часть списка опций отстает от фиксированного заголовка.

top part behind fixed header

Что CSS стиль, который я должен использовать, чтобы отобразить список опций должным образом.

Я использую bootstrap 3 и выбираю коробку из углового материала.

Сейчас я использую очень высокое значение индекса z, чтобы показать его.

Ниже код заголовка

<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%; 
} 

Чтобы сделать его более Ĉ lear Я создал демо-версию codepen demo Чтобы создать проблему. Выберите состояние. Затем выберите AZ. Затем снова нажмите кнопку выбора. Теперь вы увидите скрытый AL.

Answer 1

Честно говоря, вы не должны смешивать бутстрап и угловой материал. Угловой материал уже имеет в нем директиву панели инструментов, которая предотвратит это.

<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> 

Смотрите эту ручку: http://codepen.io/anon/pen/Ywepga