如何在 Angular Material 中固定 mat-select-panel 的位置 [英] How to fix position of mat-select-panel in Angular Material
问题描述
我有一个使用 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 在这里:
评论你的 CSS .container>*{ position: absolute;顶部:30vh;左:30vw;}
使用以下观察几个像素错位对浏览器放大/缩小的影响:
.myMatOptions{ 位置:绝对;顶部:30vh;左:30vw;}::ng-deep .cdk-overlay-container{left: 30vw;}::ng-deep .cdk-overlay-pane { left:0 !important;转换:无!重要;}::ng-deep .mat-select-panel{left: 0}
放大 80% 后,我们看到:
在 90% 的缩放比例下,我们看到渲染输出中存在轻微的未对齐:
放大100%,我们看到:
在 110% 的缩放比例下,我们看到渲染输出中存在轻微的未对齐:
放大 125% 后,我们看到:
这些轻微的视觉问题(90% 和 110%)在渲染输出上 - 这些背后的 css 是准确的,所以没有什么基本的需要解决.在这里工作 stackblitz
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.
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.
This link is how it should look (example: Firefox browser, window size 100%):
This link is what I want to fix(example: Firefox browser, window size 90%):
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:
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 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:
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}
on a zoom of 80%, we see:
on a zoom of 90%, we see a minor mis-alignment in the rendered output:
on a zoom of 100%, we see:
on a zoom of 110%, we see a minor mis-alignment in the rendered output:
on a zoom of 125%, we see:
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
这篇关于如何在 Angular Material 中固定 mat-select-panel 的位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!