Skip to content

md-input-containers text and floating label misaligned when using mdPrefix #3229

Closed

Description

When using a md-icon as a prefix to an input inside of an md-input-container the floating label gets misaligned when using a mdPrefix, as you can see below:

screen shot 2017-02-21 at 12 30 40 pm

screen shot 2017-02-21 at 12 31 33 pm

The expected behavior is to have the text aligned with the icon and also have the floating label be at the correct position. As you can see when there is no mdPrefix icon the text is all aligned how it should be:

screen shot 2017-02-21 at 12 31 01 pm

screen shot 2017-02-21 at 12 31 16 pm

To reproduce this simply add a mdPrefix to a md-input-container.
Before:

<md-input-container>
    <input mdInput placeholder="text" type="text" name="example">
</md-input-container>

and after:

<md-input-container>
    <md-icon mdPrefix>email</md-icon>
    <input mdInput placeholder="text" type="text" name="example">
</md-input-container>

Right now using mdPrefix is making the input not look good. If I am using mdPrefix wrong please let me know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions