bug(form-field): Outlined form-field should have enough space to contain floating label
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
When using `outline` appearance for `mat-form-field`, the floating label overflows out of component itself. The `mat-form-field` component should have enough space on top to contain floating label. See below screenshot for reference:
### Reproduction
StackBlitz link: https://stackblitz.com/edit/rxp9hmcc?file=src%2Fexample%2Fform-field-appearance-example.html
### Expected Behavior
The `mat-form-field` component should have enough space (margin) on top to contain floating label.
### Actual Behavior
The `mat-form-field` component does not have enough space (margin) on top to contain floating label.
### Environment
- Angular: 20
- CDK/Material: 20
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and its form-field appearance example, then inspect the Angular Material outlined mat-form-field layout and styles involved in the floating label. Done means the outlined component provides enough top space for the floating label without overflow in the reported Angular 20, Chrome, and macOS setup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100