1

我需要创建一种叠加层来显示在我的 web 应用程序的移动版本中需要更多空间的表单。

我正在尝试为此使用ngx-bootstrap 模式，但即使在使用他们提供的方法来自定义此组件之后，我仍然无法获得我想要的结果。

这就是我为模态应用自定义类的方式：

ngx-bootstrap.component.ts

  goToReportOne() {
   // ...
   this.bsModalRef.setClass('full-screen-modal');
   // ...
  }

当我旋转设备（横向模式）时，问题更加明显。为了使问题更清楚，我为每个部分分配了不同的颜色。

在此处输入图像描述

蓝色的（应用于模态的自定义样式）可以在

样式.css

.full-screen-modal {
  height: 100vh !important;
  width: 100vw !important;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  background-color: blue;
}

其他两种颜色，绿色和橙色分别应用于我在 modal 和 host 容器中显示的组件

modal-one.component.scss

:host {
  width: 90vw;
  height: 90vh;
  background-color: orangered;
}

.report-one {
  background-color: green;
  width: 20rem;
  height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

我知道我可以在 :host 选择器中轻松地将宽度和高度设置为 100，但我想知道：

1）为什么模态（蓝色）不占据整个屏幕 2）为什么橙色部分应用 100% 的高度和宽度不起作用。只有 100vh 和 100vw 会占据整个屏幕

这是stackblitz中的一个演示

谢谢

4

0 回答 0