angular / angular/components

material/form-field(outline): text is misaligned vertically when no mat-label defined

Open
#17,771 6 comments 1 reaction 0 assignees View on GitHub
area: material/form-field feature material spec P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

https://angular-input-outline.stackblitz.io

Steps to reproduce:
1. Type into the input


#### Expected Behavior

The text should be vertically aligned in the input box.

#### Actual Behavior

The text is misaligned vertically.

#### Environment

- Angular: 8.2.14
- CDK/Material: 8.2.3
- Browser(s): Chrome, Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and compare the outlined mat-form-field behavior when no mat-label is defined. Trace the Angular Material form-field implementation from the reproduction, then verify the result in Chrome and Firefox. Done means typed text is vertically aligned within the input box without a mat-label.

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
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.