javascript - Hur man fixerar positionen för mat-select-panel i Angular Material

Jag har ett projekt där jag använder Angular Material-komponenter och jag skulle vilja anpassa mat-select. Jag vill uppnå en valinngång där mat-select-panelen ser ut som att den är en rullgardinsmeny precis som i en vanlig HTML-select. Jag har uppnått ett bra resultat med enbart CSS-stilar men jag har ett problem.

Problemet är att min mat-select ser olika ut beroende på storleken på webbläsarfönstret. Mer specifikt är mat-form-field och mat-select-panel ibland inte i linje (deras vänstra sidor är inte på samma rad) och detta är inte acceptabelt i mitt projekt.

Den här länken är hur det ska se ut (exempel: Firefox-webbläsare, fönsterstorlek 100%):

Den här länken är vad jag vill fixa (exempel: Firefox-webbläsare, fönsterstorlek 90%):

Mina förutsägelser varför det inte fungerar: mat-select-panel har en absolut position och är inställd på position beroende av cdk-overlay-panel. Cdk-overlay-panel position beräknas dynamiskt. Ibland trunkeras bråkdelsvärden för bredd och höjd och därför uppstår en skillnad på en pixel mellan mat-form-field och mat-select-panel. Detta är ett exempel:

Vad vill jag uppnå? Jag letar efter ett sätt att göra så att mitt inmatningsfält alltid ser bra ut oavsett storleken på webbläsarfönstret. Linjen mellan mat-form-field och mat-select-panel måste alltid vara rak.

Stackblitz för mitt inmatningsfält är här: en länk

Svar #1

Älskar uppmärksamheten på detaljer i din observation... Jag har haft en kund med ett sådant öga också :) ... vid kontroll av din stackblitz, observerar vi följande som är ett större problem som behöver lösas:

Kommenterade din CSS .container>*{ position: absolute; top: 30vh; left: 30vw; } med följande för att observera effekten av några pixlars feljustering vid in- och utzoomning i webbläsaren:

.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}

vid en zoom på 80% ser vi:

vid en förstoring på 90% ser vi en mindre feljustering i det renderade resultatet:

vid en zoom på 100% ser vi:

vid en förstoring på 110% ser vi en mindre feljustering i det renderade resultatet:

vid en zoom på 125% ser vi:

Dessa mindre visuella problem (på 90% och 110%) finns på den renderade utdata - CSS:en bakom dessa är exakt så det finns inget grundläggande att åtgärda. fungerande Stackblitz här

Relaterade artiklar