【问题标题】:angular material md-datepicker inside bootstrap modal引导模态内的角材料 md-datepicker
【发布时间】:2017-03-19 21:35:44
【问题描述】:

我正在尝试在 Bootstrap 模态中使用 Angular 材料 md-datepicker,但是在单击模态弹出窗口隐藏的日期时。我该如何解决这个问题?

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

怎么样……

在模态类中禁用display: block 后...

【问题讨论】:

  • 如何让日期选择器首先呈现?尝试了很多东西,只是没有显示选择框。

标签: css bootstrap-modal angular-material


【解决方案1】:

接受的答案不适用于@angular/material 5.0.0-rc0

改为添加&lt;your_component&gt;.component.scss 文件:

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

由于视图封装,需要使用::ng-deep(或/deep/)前缀。请注意,deep 在文档中被标记为已弃用,并且使用 cdk-overlay-container 可能不是一个好习惯,因为未来的材料模块更改可能会破坏它。

【讨论】:

  • ::ng-deep 已弃用
【解决方案2】:

我遇到了同样的问题,发现this solution到一个类似的问题实际上解决了这个问题。您只需在模态窗口的 HTML 代码中添加以下样式:

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

other upvoted answer 对同一问题表示您也可以修改 angular-material.css 文件并在那里更改 z-index,但我不建议修改源文件,因为如果您决定更改可能会被还原更新库。

【讨论】:

  • 这不适用于材料 8.1.2。即使使用 Angular 8,ng-deep 的答案也有效。
【解决方案3】:

@angular/material 5.2.4 的工作解决方案是将我的 css 文件添加到以下部分。

.cdk-overlay-container { 
    z-index: 1200; 
}

【讨论】:

    【解决方案4】:

    使用 "@angular/material": "^11.2.13" 对我来说可行的解决方案是在下面添加我的全局 css 文件。

    .cdk-overlay-container { z-index: 1200; }

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-11-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-08-02
      • 1970-01-01
      相关资源
      最近更新 更多