如何调整垫子选择高度以适合其项目? [英] How to adjust mat-select height to fit its items?

问题描述

在 Angular 材质中，我需要根据项目列表动态增加 mat-select 的高度、开始和结束位置.例如，选项列表的范围可能从无到 100.所以高度应该适合内容，并且也不应该显示在我的应用程序屏幕之外.

In Angular material, I need to increase the height, start and end position of a mat-select dynamically based on list of items. For example, list of options may range from none to 100. So the height should fit to the content and also should not display outside of my application screen.

我使用了以下样式，但是当我有更多项目时，前几个项目没有显示在屏幕上.如果我使用 margin-top，它会在位于屏幕顶部位置的另一个下拉菜单中破坏设计.因此，无论下拉位置如何，它都应该以最大高度显示在我的屏幕内.

I used below style but when I have more items, first few items are not getting displayed in screen. If I use margin-top, it breaks the design in another dropdown which is located on top position of my screen. So irrespective of dropdown position, it should display inside my screen with maximum height.

谁能帮我在 CSS 中解决这个问题?

Can any help me to fix this in CSS?

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

推荐答案

你可以使用事件 (openedChange) 来改变使用 Renderer2 的选择面板的高度

you can use the event (openedChange) to change the heigth of the select-panel using Renderer2

就是这样，在 .html 中

Thats, in .html

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

在你的 .ts 中，首先注入构造函数 Renderer2

In your .ts, first inject in constructor Renderer2

constructor(private renderer:Renderer2){}

你的函数 changeHeight

And your function 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) {}
}

并使用like

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

参见另一个stackblitz

这篇关于如何调整垫子选择高度以适合其项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！