角材md-datepickerをブートストラップモーダル内に

Question

角度ストラップの内側に角度のある材料md-datepickerを使用していますが、モーダルポップアップが隠れた日付をクリックすると、どうすれば問題を解決できますか？モーダルクラスのdisplay: blockを無効にした後

それがどのように

<div class="modal fade " tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close forVideoStop" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title">Introduction video for body composition ...</h4> 
     </div> 
     <div class="modal-body"> 
      <md-datepicker ng-model="myDob" md-placeholder="Enter date" name="dateField" max-date="maxDate"></md-datepicker> 
     </div> 
     </div> 
    </div> 
</div> 

<div class="modal fade " tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close forVideoStop" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title">Introduction video for body composition ...</h4> 
     </div> 
     <div class="modal-body"> 
      <md-datepicker ng-model="myDob" md-placeholder="Enter date" name="dateField" max-date="maxDate"></md-datepicker> 
     </div> 
     </div> 
    </div> 
</div> 

...

...

Answer 1

私は、同じ問題を抱えていましたその結果、this solutionがシムに見つかりましたilarの質問が実際に問題を解決しました。あなたは自分のモーダルウィンドウのHTMLコードに次のスタイルを追加する必要があります。

<style> 
    .md-datepicker-calendar-pane { 
     z-index: 1200; 
    } 
</style> 

other upvoted answer同じ質問には、私はドンあなたにもangular-material.cssファイルを変更して、そこのzインデックスを変更できることを言いますが、ライブラリを更新する場合、変更が元に戻される可能性があるため、ソースファイルを変更することをお勧めします。

Answer 2

@angular/material 5.0.0-rc0の回答がうまくいきません。

::ng-deep .cdk-overlay-container{ 
    z-index: 1200 !important; 
} 

::ng-deep（または/deep/）接頭辞が原因ビューのカプセル化を使用する必要があります

は、代わりに<your_component>.component.scssファイルに追加します。深さはドキュメントで廃止予定とマークされており、cdk-overlay-containerを使用することは、将来の材料モジュールの変更により破壊される可能性があるため、おそらく良い方法ではないことに注意してください。