【问题标题】:mat-select not working in mat-expansion-panelmat-select 在 mat-expansion-panel 中不起作用
【发布时间】:2018-07-04 11:44:09
【问题描述】:

我们必须在 mat-expansion-panel 中显示一个表单。表单中有多个字段,其中少数我使用 mat-select,另外一些我使用 mat-input。

在扩展面板中,matInput 工作正常,但 mat-select 没有显示用于选择可能值的选项。

虽然 mat-select 在正常显示时工作正常。

   <mat-expansion-panel>
        <mat-expansion-panel-header>
            Heading 1
        </mat-expansion-panel-header>
        <mat-form-field>
            <mat-select placeholder="Select">
                <mat-option value="1">option 1</mat-option>
                <mat-option value="2">option 2</mat-option>
                <mat-option value="3">option 3</mat-option>
                <mat-option value="4">option 4</mat-option>
            </mat-select>
        </mat-form-field>
    </mat-expansion-panel>

感谢任何帮助。

【问题讨论】:

    标签: select angular-material accordion


    【解决方案1】:

    我通过添加以下样式解决了这个问题

    body div.cdk-overlay-container {
      z-index: 1000000;
    }
    

    通过调试,我了解到另一个具有更高 z-index 的面板正在覆盖 mat-select 选项。我将增加的 z-index 值提供给 cdk-overlay-container 并且它起作用了。

    感谢您的支持。

    【讨论】:

    • 这应该被标记为正确答案。我知道它与 z-index 有关,但您确定使用 1000000 作为 z-index 值是一个好习惯吗?
    • @ImmadHamid 这完全取决于 UI 设计以及您如何将元素置于彼此之上。在这种情况下,cdk-overlay-container 是打开的 mat-select 的父级,我们要为其分配 z-index(默认 z-index:1000),使其在不同的容器中可见。 z-index as 1000000 适用于我的情况,一些较小的值(首选)也可能适用于您的情况......在编程和生活中没有什么是通用的,一切都必须在这种情况下使用......谢谢你的提问。跨度>
    猜你喜欢
    • 1970-01-01
    • 2020-09-24
    • 2019-03-09
    • 2019-10-26
    • 1970-01-01
    • 2019-07-21
    • 1970-01-01
    • 1970-01-01
    • 2019-12-26
    相关资源
    最近更新 更多