为什么角材料选择被溢出屏幕(Why angular material select is overf

2019-10-28 20:25发布

我采用了棱角分明的材料选择在我的应用程序,你可以在这里找到https://material.angular.io/components/select/overview 。 问题是,当我们把选择靠近屏幕它的底部,并在打开时,它溢出了画面。 这是我遇到的屏幕截图。 什么样的CSS是需要从发生prevant这一点。

   <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>

Answer 1:

您可以覆盖分页程序面板的默认CSS到任何地方在屏幕上:

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

根据您想要的元素将更改类的属性。



文章来源: Why angular material select is overflowing the screen