css - 为什么 Angular Material 选择溢出屏幕

标签 css angular typescript material-design angular-material

我在我的应用程序中使用 Angular Material 选择,您可以在这里找到 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>

enter image description here

最佳答案

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

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

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

关于css - 为什么 Angular Material 选择溢出屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49977202/

相关文章:

angular - 非规范化 ngrx store- 设置选择器?

使用自定义 TS 装饰器的组件方法中未定义 Angular 服务

visual-studio - 什么是 TypeScript 项目构建配置选项?

javascript - 确定引用中的对象是否为空的最佳方法

html - 在导航栏 div 内对齐图像

html - flex 盒内 flex 盒的 CSS 高度问题

javascript - Auth0 服务无法使用 Angular 2 找到容器

javascript - 用于导入 commonjs/amd 模块的新 es6 语法,即 `import foo = require(' foo')`

html - 当悬停 p 元素时尝试显示 div 元素时,我的 CSS 无法正常工作

php - 在浏览器中编辑html