如何固定垫选择面板在角材料中的位置 [英] How to fix position of mat-select-panel in Angular Material
问题描述
我有一个使用Angular Material Components的项目，我想自定义垫层选择.我想实现选择输入，该输入的mat-select-panel看起来像是本机html select中的下拉菜单.我仅使用CSS样式就取得了良好的效果，但是我遇到了一个问题.
I have a project in which I use Angular Material Components and I would like to customize mat-select. I want to achieve select input which mat-select-panel looks like it's dropdown as in native html select. I accomplished good effect using only CSS styles but I have one problem.
问题在于，根据浏览器窗口的大小，我的mat-select外观看起来有所不同.更具体地讲，mat-form-field和mat-select-panel有时不对齐(左侧不成一直线)，这在我的项目中是不可接受的.
The problem is that my mat-select looks different depending on the size of the browser window. More specifically, mat-form-field and mat-select-panel sometimes are not aligned (there left sides are not in line) and this is not acceptable in my project.
此链接的外观如下(例如:Firefox浏览器，窗口大小为100％):
This link is how it should look (example: Firefox browser, window size 100%):
此链接是我要修复的(例如:Firefox浏览器，窗口大小为90％):
This link is what I want to fix(example: Firefox browser, window size 90%):
我的预测为何不起作用: mat-select-panel具有绝对位置，并且根据cdk-overlay-panel设置为位置. Cdk-overlay-panel位置是动态计算的.有时，宽度和高度的分数值会被截断，因此，mat-form-field和mat-select-panel之间只有一个像素的差.这是一个示例:
My predictions why it does not work: mat-select-panel has a position absolute and is set to position depending on cdk-overlay-panel. Cdk-overlay-panel position is calculated dynamically. Sometimes fractional width and height values are truncated and hence the difference of one pixel between mat-form-field and mat-select-panel. This is an example:
我想实现什么? 我正在寻找一种方法，无论浏览器窗口大小如何，都可以使我的输入始终看起来不错. mat-form-field和mat-select-panel之间的线必须始终是直线.
What I want to achieve? I am looking for a way to make my input always look good regardless of the browser window size. Line between mat-form-field and mat-select-panel must always be straight.
在这里输入我的Stackblitz: 链接
Stackblitz for my input is here: a link
推荐答案
Love the attention to detail in your observation... I've had a customer with such an eye also :) ... on checking your stackblitz, we observe the following which is a bigger issue which needs resolution:
使用以下内容注释了CSS .container>*{ position: absolute; top: 30vh; left: 30vw; } ，以观察未对齐的几个像素对浏览器放大/缩小的影响:
Commented your CSS .container>*{ position: absolute; top: 30vh; left: 30vw; } with the following to observe the effect of mis-aligned few pixels on zooming in/out on the browser:
.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％的缩放比例，我们看到:
on a zoom of 80%, we see:
在 90％的缩放比例上，我们看到了渲染输出中的轻微错位:
on a zoom of 90%, we see a minor mis-alignment in the rendered output:
以 100％的缩放比例，我们看到:
on a zoom of 100%, we see:
在 110％的缩放比例上，我们看到了渲染输出中的轻微对齐错误:
on a zoom of 110%, we see a minor mis-alignment in the rendered output:
以 125％的缩放比例，我们看到:
on a zoom of 125%, we see:
这些次要的视觉问题(分别占90％和110％)在渲染的输出上-这些后面的CSS非常准确，因此没有任何基本要解决的问题. 在此处工作stackblitz
These minor visual issues (on 90% and 110%) are on the rendered output - the css behind these is exact so there is nothing fundamental to resolve. working stackblitz here
这篇关于如何固定垫选择面板在角材料中的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
