为什么角度材质选择会在屏幕上溢出 [英] Why angular material select is overflowing the screen

问题描述

我正在我的应用程序中使用角形材料选择，您可以在这里找到 https://material .angular.io/components/select/overview .问题是，当我们将选择放置在屏幕底部附近时，当它打开时，它会使屏幕溢出.这是我所经历的屏幕截图.需要什么样的css才能阻止这种情况的发生.

I am using angular material select in my application which you can find here https://material.angular.io/components/select/overview. The problem is when we place the select near the bottom of the screen it, and when it is opened, It overflow the screen. This is the screenshot of what I am experiencing. What kind of css is needed to prevant this from happening.

   <mat-select style="margin-bottom: 0px;" placeholder="{{input1.title}}" >
                            <mat-option>None</mat-option>
                                               <mat-option *ngFor="let opt_value of input1.enumNameGroups[grp_value] let i = index" value="{{input1.enumidGroups[grp_value][i]}}" >{{opt_value}}</mat-option>
                                                </mat-optgroup>

      </mat-select>

推荐答案

您可以覆盖分页器面板的默认CSS，以将其放置在屏幕上的任何位置:

You can override the default css of the paginator panel to place it anywhere on the screen:

::ng-deep .mat-select-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 300px;
  width: 100%; 
}

根据要放置元素的位置更改类的属性.

Change the properties of the class depending on where you want to place the element.

这篇关于为什么角度材质选择会在屏幕上溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！