ダイアログボックスの後ろに選択オプションが表示されています。

Question

私のアプリケーションでngDialog **プラグインを使用しようとしていますが、残念ながらmd-optionsがダイアログの後ろに表示されています。ここ

はHTMLコードです：

<md-card> 
<md-card-content> 
        <div layout="row"> 
         <md-input-container> 
          <label>State</label> 
          <md-select ng-model="ctrl.userState"> 
          <md-option><em>None</em></md-option> 
          <md-option ng-repeat="user in rao">{{user.name}}</md-option> 
          </md-select> 
         </md-input-container> 
        </div> 
       </md-card-content> 
      </md-card> 

、出力は次のとおりです。 enter image description here

Answer 1

は最終的に私はこのための解決策を見つけた

<md-dialog aria-label="options dialog"> 
      <md-dialog-content layout-padding> 
       <h2 class="md-title">Choose an option</h2> 
       <md-select ng-model="myModel" placeholder="Pick"> 
       <md-option>1</md-option> 
       <md-option>2</md-option> 
       <md-option>3</md-option> 
       </md-select> 
      </md-dialog-content> 
      <md-dialog-actions> 
      <span flex></span> 
      <md-button ng-click="close()">Okay!</md-button> 
      </md-dialog-actions> 
    </md-dialog> 

WORKING DEMO

Answer 2

、これを試してみてくださいz-indexを設定することによる問題アウエー。実際には、ngDiloagと角材料を使用しています。だから、ここでmd-selectはngDialogの背後にあるレンダリングオプションです。だから私はz-インデックスを設定する

.ngdialog.ngdialog-theme-default { 
    z-index: 80; 
} 

Answer 3

"angular-material.min.css"ファイルのクラスを更新するだけです。

.md-select-menu-container, 
.md-open-menu-container { 
    z-index:999999important; 
}