为什么角度材料选择会溢出屏幕答案

【问题标题】：Why angular material select is overflowing the screen为什么角度材料选择会溢出屏幕
【发布时间】：2018-10-03 06:28:58
【问题描述】：

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

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

【问题讨论】：

期望的行为是什么？如果底部没有足够的空间，您希望选择去哪里？
Material Select 组件自己处理这个问题，检查您包含的文档链接并调整屏幕大小以查看它的实际效果。这意味着您的布局有问题，或者您遇到了错误。
@bugs ：是的，如果没有足够的空间，我想选择上去。
@Jaydeep 显示选择的代码。
@ranjeet8082 ：这是由材料设计分页使用此片段生成的。

标签： css angular typescript material-design angular-material

【解决方案1】：

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

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

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

【讨论】：