Open Warwizza opened 1 year ago
In the stackblitz from the "Reproduction" I've swithced to v14 and there's no issue.
So, it looks like the regression issue.
The workaround which is applied to all mat dialogs in a project:
.mat-field-inside-dialog-workaround .mat-mdc-dialog-title + .mat-mdc-dialog-content {
padding-top: 4.3px;
}
panelClass
in the providers
section of the root module ("app.module.ts")
providers: [
{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {panelClass: 'mat-field-inside-dialog-workaround'}},
]
Update (2024-06-24): the above workaround doesn't work since Angular 18
I've ended up using another workaround which sets the overflow of the mat-dialog-content to visible. Add the following to the styles.css of the project:
mat-dialog-content { overflow: visible !important; }
I came across the same issue, but also on non-dialog specific use cases. The base problem seems to be that the label is outside the boundary of the mat-form-field.
I've ended up using another workaround which sets the overflow of the mat-dialog-content to visible. Add the following to the styles.css of the project:
mat-dialog-content { overflow: visible !important; }
Be aware that this can mess up mat-dialog-actions
This can help
mat-dialog-content form mat-form-field:first-of-type {
margin-top:4px;
}
I now put it in my CSS of the component, but maybe suitable in the base-CSS (styles.css)
For tab-pages the same problem. I solved this by adding this to styles.css
form mat-tab-body mat-form-field:first-of-type {
margin-top:6px;
}
Because each body has a "first" mat-form-field
I have the same problem...and I'd love a correction! (thanks for the temporary workarounds)
Interestingly I get different results in a production build and dev build (top is production, bottom is dev):
Prod
Dev
Interestingly I get different results in a production build and dev build (top is production, bottom is dev):
Prod
Dev
i have the same)
Is this a regression?
The previous version in which this bug was not present was
No response
Description
I'm not sure if this is a regression as we used the legacy style form fields before we updated to Angular (material) v15
When placing a form field with appearance="outline" as the first element in a dialog I get the following result:![image](https://user-images.githubusercontent.com/40668465/210241509-5e6783b6-3063-456b-b3fc-be7b1f757a91.png)
I'm using the mat-dialog-title and mat-dialog-content directives which will set the top padding of the content part to 0px![image](https://user-images.githubusercontent.com/40668465/210242034-68ab4fa8-964c-49eb-86db-73c137dc7d2b.png)
A simple workaround is to set a top padding of 5px, but this should work out of the box.
Reproduction
Steps to reproduce:
Expected Behavior
I would expect to be able to see the full label when a form field is the first element in a dialog.
Actual Behavior
The top part of the label is cut off.
Environment
Angular CLI: 15.0.3 Node: 16.13.1 Package Manager: npm 8.1.3 OS: win32 x64
Angular: 15.0.3 ... animations, cli, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... platform-server, router
Package Version
@angular-devkit/architect 0.1500.3 @angular-devkit/build-angular 15.0.3 @angular-devkit/core 15.0.3 @angular-devkit/schematics 15.0.3 @angular/cdk 15.0.2 @angular/flex-layout 14.0.0-beta.41 @angular/material 15.0.2 @angular/material-moment-adapter 15.0.2 @schematics/angular 15.0.3 rxjs 7.6.0 typescript 4.8.4