Mat-datepicker呈现在内容下方。

问题描述 投票：0回答：1

我在Angular中的素材设计datepicker呈现在内容下方。

我有一个组件是模块的一部分，在app-root里面渲染。在这个组件里面我有mat-stepper，在一个步骤里面我有mat-datepicker。

这就是我的组件apporx.的样子。

<mat-horizontal-stepper #stepper>
     <mat-step>
        <div data-component="app-root">
          <section>
            ...
              <mat-form-ifield>
                    <mat-label>Choose a date</mat-label>
                    <input matInput [matDatepicker]="picker">
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                  </mat-form-ifield>
            ...

当我检查页面的时候，我看到了以下内容

<head>
 <body>
  <app-root>
   <my component here>
  <couple of scripts>
  <div class="cdk-overlay-container>...</div> (this is where the datepicker is rendered)

我想我可以通过编辑cdk-overlay-container类的css来解决这个问题，但这似乎不是正确的方法。这里的问题是什么？

enter image description here

angular material-design angular-material2
1个回答
0
投票

从问题中给出的信息来看，这似乎是cdk-overlay的z-index值过高造成的问题。请尝试降低z-index值。另外如果可能的话，请在问题本身中添加cdk-overlay和其他日期选择器相关的css类，以提高代码的清晰度。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.