css - 使用 mat-expansion-panel 时增加下拉菜单的高度

Question

我将 ng-select 包裹在 mat-expansion-panel 中。我希望能够增加下拉列表的高度以超出 mat-expansion-panel 的高度，但我无法获得这种效果。我试图玩弄 z-index 但仍然无法正常工作。

Stackblitz 此处为国家/地区列表示例

我的代码：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" }];
}

国家服务

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'}
   ];
}

标签： cssangularangular-material

Answer 1

我不确定您要做什么，但我认为您正在寻找的是：

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

在显示下拉列表选项时扩展 mat-expansion-panel 的高度。