How to fix position of mat-select-panel in Angular Material
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 90%, we see a minor mis-alignment in the rendered output:
on a zoom of 110%, we see a minor mis-alignment in the rendered output:
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
wojciech_cichocki
Updated on August 21, 2022Comments
-
wojciech_cichocki over 1 year
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
-
wojciech_cichocki over 4 yearsThanks but isn't work in my project. It works only in the example in Stackblitz. I use this select in more complex project. Maybe you know what I should do when my mat-form-field is located in MatDialog. Then left and top value is calculated dynamically. Styles with ::ng-deep doesn't work.
-
Akber Iqbal over 4 yearsi can help if you can share a MVCE
-
wojciech_cichocki over 4 yearsWhat does MVCE stand for? Would you like to see the code?
-
wojciech_cichocki over 4 yearsI will try to prepare MVCE but later. I also tries to achieve the same effect using matNativeControl: stackoverflow.com/questions/57249416/…. Maybe you have an idea?