mat-select not working in mat-expansion-panel

Question

We have to show a form inside mat-expansion-panel. There are multiple fields in the form, for few of them I am using mat-select and for another few I am using mat-input.

In expansion panel, matInput is working fine but mat-select is not showing the options for selecting a possible value.

Though mat-select is working fine when showed normally.

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

Any help is appreciated.

Ajay Ajay · Accepted Answer · 2018-01-25T09:50:58

I solved it by adding following styles

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

By debugging, I got to know that another panel with higher z-index was overriding the mat-select options. I provided the increase z-index value to cdk-overlay-container and it worked.

Thanks for your support.

mat-select not working in mat-expansion-panel

1 Answers