angular / angular/components

bug(mat-form-field): form field with mat-label and without mat-label not vertically aligned

Open
#27,086 3 comments 1 reaction 0 assignees View on GitHub
area: material/form-field P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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

14

### Description

When two mat-form-fields are in a div and one has a mat-label while the other one hasn't, the fields are not aligned vertically.

The `display` property on `.mat-form-field` was changed from `inline-block` to `inline-flex`. Changing it back seems to solve the issue.

### Reproduction

https://stackblitz.com/edit/cjzlva?file=src%2Fapp%2Fform-field-overview-example.html

### Expected Behavior

Form fields are aligned vertically

### Actual Behavior

Forms fields are not aligned

### Environment

- Angular: 15.2.9 / 16.0.1
- CDK/Material: 15.2.9 / 16.0.1
- Browser(s): Chrome 113 / FireFox 113
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Contributor guide

Open the contributing guide

Research direction

Open the linked StackBlitz reproduction and compare the two mat-form-fields, then inspect the .mat-form-field display rule changed from inline-block to inline-flex. Confirm the fix by checking that fields with and without mat-label align vertically in the reported Angular Material versions and browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, css, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.