angular / angular/components

matPrefix element not aligned properly in form field with appearance fill and outline

Open
#12,803 20 comments 43 reactions 0 assignees View on GitHub
area: material/form-field G material spec P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
matPrefix Element should be aligned properly with matLabel in MatFormField with appearance set as "Fill" and "Outline"

#### What is the current behavior?
Not as expected

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-xfexy1

![image](https://user-images.githubusercontent.com/1287731/44534098-9d987900-a714-11e8-98aa-a7cb8e7aec70.png)

#### What is the use-case or motivation for changing an existing behavior?

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
6

#### Is there anything else we should know?

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the alignment problem in the linked StackBlitz using the Angular 6 example, focusing on matPrefix within MatFormField for fill and outline appearances. Trace the relevant form-field rendering and styling from that reproduction; done means the matPrefix element aligns properly with the matLabel in both appearances.

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
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.