Как отрегулировать высоту коврика по размеру его предметов?

Question

В материале Angular мне нужно динамически увеличивать высоту, начальную и конечную позицию мата, основываясь на списке элементов. Например, список параметров может варьироваться от нуля до 100. Таким образом, высота должна соответствовать содержимому и не должна отображаться за пределами экрана моего приложения.

Я использовал стиль ниже, но когда у меня появляется больше элементов, первые несколько элементов не отображаются на экране. Если я использую margin-top, он разбивает дизайн в другом раскрывающемся списке, расположенном в верхней части моего экрана. Таким образом, независимо от положения раскрывающегося списка, он должен отображаться внутри моего экрана с максимальной высотой.

Может ли кто-нибудь помочь мне исправить это в CSS?

.mat-select-panel {
    max-height: 95vh !important;
  }

Answer 1

вы можете использовать событие (openChange) для изменения высоты панели выбора с помощью Renderer2

Thats, in. html

<mat-select #select (openedChange)="changeHeight($event,select)">
    <mat-option>...</mat-option>
    <mat-option>...</mat-option>
</mat-select>

Сначала в вашем .ts inject in constructor Renderer2

constructor(private renderer:Renderer2){}

И ваша функция changeHeight

changeHeight(event:any,element:any)
{
    if (event)
    {
      //get the height of the "screen"
      const height = window.innerHeight|| 
                     document.documentElement.clientHeight|| 
                     document.body.clientHeight;
      //the max-height will be the height of the screen - the position of pannel
      // - 10 px (you can change this last one)
      this.renderer.setStyle(element.panel.nativeElement,
          'max-height',
           (height-10-element.panel.nativeElement.getBoundingClientRect().y)+'px')
     }
}

Вы можете увидеть в этот stackblitz

Вы также можете сделать директиву

@Directive({
  selector: "[autosize]"
})
export class AutosizeDirective {
  @HostListener("openedChange", ["$event"])
  changeHeight(event: any) {
    if (event) {
      const height =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      this.renderer.setStyle(
        this.select.panel.nativeElement,
        "max-height",
         (height -10 -this.select.panel.nativeElement.getBoundingClientRect().y) +"px");
    }
  }
  constructor(@Host() private select: MatSelect, private renderer: Renderer2) {}
}

И используйте как

<mat-select autosize>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
</mat-select>

См. другой stackblitz