Question

我有一个我在其中使用Angular Material Components的项目，并且我想自定义Mat-select。我想实现选择输入，该输入的mat-select-panel看起来像本地HTML select中的下拉菜单一样。我仅使用CSS样式就取得了良好的效果，但是我遇到了一个问题。

问题在于，根据浏览器窗口的大小，我的Mat-select外观看起来有所不同。更具体地讲，mat-form-field和mat-select-panel有时不对齐（左侧不成一直线），这在我的项目中是不可接受的。

此链接应为外观（例如：Firefox浏览器，窗口大小为100％）：

此链接是我要修复的示例（例如：Firefox浏览器，窗口大小为90％）：

我的预测为何不起作用： mat-select-panel具有绝对位置，并且根据cdk-overlay-panel设置为位置。 Cdk-overlay-panel位置是动态计算的。有时，宽度和高度的分数值会被截断，因此，mat-form-field和mat-select-panel之间只有一个像素的差。这是一个示例：

我想实现什么？我正在寻找一种方法，无论浏览器窗口大小如何，输入都始终看起来不错。 mat-form-field和mat-select-panel之间的线必须始终是直线。

在这里输入我的Stackblitz： a link

Answer 1

喜欢您在观察中对细节的关注...我也有这样的客户：) ...在checking your stackblitz上，我们观察到以下是一个更大的问题，需要解决：

用以下内容注释了CSS .container>*{ position: absolute; top: 30vh; left: 30vw; } ，以观察未对齐的几个像素对浏览器放大/缩小的影响：

.myMatOptions{  position: absolute;  top: 30vh;  left: 30vw; }
::ng-deep .cdk-overlay-container{left: 30vw;}
::ng-deep .cdk-overlay-pane { left:0 !important; transform:none !important;}
::ng-deep .mat-select-panel{left: 0}

以 80％的缩放比例，我们看到：

在 90％的缩放比例上，我们看到了渲染输出中的轻微错位：

以 100％的缩放比例，我们看到：

在 110％的缩放比例上，我们看到了渲染输出中的轻微错位：

以 125％的缩放比例，我们看到：

这些次要的视觉问题（分别占90％和110％）在渲染的输出上-这些后面的CSS非常准确，因此没有任何基本要解决的问题。 working stackblitz here

如何固定垫选择面板在角材料中的位置

1 个答案: