Mat-datepicker呈现在内容下方。

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

解决方案:

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

给TA打赏
共{{data.count}}人
人已打赏
解决方案

标签活动片段到活动

2022-4-22 6:00:11

解决方案

将十六进制数转换为2的补码。

2022-4-22 6:00:13

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索