Increase the height of Dropdown menu when using mat-expansion-panel

Question

I have ng-select wrapped inside mat-expansion-panel. I would like to be able to increase the height of the dropdown list to go beyond the height of mat-expansion-panel but I cannot get that effect. I have tried to play around with z-index but still not working.

Stackblitz Example here for list of countries

My code: HTML

<mat-accordion>
    <mat-expansion-panel class="shadow">
        <mat-expansion-panel-header>
            <mat-panel-title>
                <b>Location</b>
            </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="location">
            Country
            <ng-select class="m-t-10" [(ngModel)]="selectedCountry">
                <ng-option *ngFor="let country of countries" value="country.value">
                    <div class="famfamfam-flags {{country?.value.toLowerCase()}}"></div>
                    {{country?.label}}
                </ng-option>
            </ng-select>
        </div>
        <mat-divider></mat-divider>
    <div class="location">
        Province
        <ng-select class="m-t-10" [(ngModel)]="selectedProvince">
            <ng-option *ngFor="let province of provinces" value="country.value">
                {{province?.label}}
            </ng-option>
        </ng-select>
    </div>
        <mat-divider></mat-divider>
    <div class="location">
        District
        <ng-select class="m-t-10" [(ngModel)]="selectedDistrict">
            <ng-option *ngFor="let district of districts" value="district.value">
                {{district?.label}}
            </ng-option>
        </ng-select>
    </div>
    </mat-expansion-panel>
</mat-accordion>

    import { Component,ViewEncapsulation} from "@angular/core";
import { CountryListService } from "./../country.service";

@Component({
  selector: "app-location",
  templateUrl: "./location.component.html",
  styleUrls: ["./location.component.css"],
  encapsulation: ViewEncapsulation.None,
  providers: [CountryListService]
})
export class LocationComponent {
  constructor(private countryList: CountryListService) {}

  selectedCountry = "Select";
  selectedProvince = "Select";
  selectedDistrict = "Select";

  countries = this.countryList.getCountries();
  provinces = [{ label: "province1", value: "province1" }];
  districts = [{ label: "Dist1", value: "District1" }];
}

Countries Service

import {Injectable} from '@angular/core';

@Injectable()
export class CountryListService{
  constructor(){}

  getCountries(){
    return CountryListService.COUNTRIES;
  }
  private static readonly COUNTRIES = [
        {value: 'AF', label: 'Afghanistan'},
        {value: 'AX', label: 'Åland Islands'},
        {value: 'AL', label: 'Albania'},
        {value: 'DZ', label: 'Algeria'},
        {value: 'AS', label: 'American Samoa'},
        {value: 'AD', label: 'Andorra'},
        {value: 'AO', label: 'Angola'},
        {value: 'AI', label: 'Anguilla'},
        {value: 'AQ', label: 'Antarctica'},
        {value: 'AG', label: 'Antigua and Barbuda'},
        {value: 'AR', label: 'Argentina'}
   ];
}

Quentin Grisel Quentin Grisel · Accepted Answer · 2021-02-21T18:06:01

I'm not sure about what your are trying to do but I think what you are looking for is :

.ng-dropdown-panel {
  position: relative !important;
}

To expand the height of the mat-expansion-panel when you display the dropdown list options.

Increase the height of Dropdown menu when using mat-expansion-panel

1 Answers