bug(Dialog, Form Field): The form field outline appearance label is cut of when it's the first element in a dialog

[Warwizza]

Is this a regression?

• [x] Yes, this behavior used to work in the previous version

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:

I'm using the mat-dialog-title and mat-dialog-content directives which will set the top padding of the content part to 0px

A simple workaround is to set a top padding of 5px, but this should work out of the box.

Reproduction

Steps to reproduce:

1. Open the following Stackblitz .
2. Click the Pick one button to open the dialog.
3. The dialog should focus the input and this shows the image.
4. Optional enter a value in the input field

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

[AlexElin]

In the stackblitz from the "Reproduction" I've swithced to v14 and there's no issue. So, it looks like the regression issue.

[AlexElin]

The workaround which is applied to all mat dialogs in a project:

1. Define the below style in the "styles.css"

.mat-field-inside-dialog-workaround .mat-mdc-dialog-title + .mat-mdc-dialog-content {
  padding-top: 4.3px;
}

2. Configure global 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'}},
]

[Warwizza]

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

[DanielHabenicht]

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.

[DanielHabenicht]

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

[martinmolema]

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

[agrandin0]

I have the same problem...and I'd love a correction! (thanks for the temporary workarounds)

[philmayfield]

Interestingly I get different results in a production build and dev build (top is production, bottom is dev):

Prod

Dev