6

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
  • 4,773
  • 3
  • 23
  • 36

1 Answers1

6

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.

Ajay
  • 4,773
  • 3
  • 23
  • 36
  • 2
    This should be marked as the right answer. I get that it has to do with z-index but are you sure using 1000000 as a z-index value is a good practice? – Immad Hamid Apr 19 '19 at 21:44
  • 1
    @ImmadHamid it's totally depends on the UI design and how you are positioning elements over one another. In this case, cdk-overlay-container is a parent of opened mat-select to whom we would like to assign the z-index (Default z-index:1000) which makes it visible inside a different container. z-index as 1000000 works for my case, some lesser value (preferable) might work for your case too... Nothing is general in programming and life and everything has to be used wrt the situation... Thanks for asking. – Ajay May 05 '19 at 15:30