Skip to content

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

Closed

Description

@WillAnd31

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.

Activity

  1. added
    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
    on Feb 21, 2017
  2. fxck commented on Feb 22, 2017

    @fxck
    Contributor

    dupe of #2586 I believe

  3. angular-automatic-lock-bot commented on Sep 5, 2019

    @angular-automatic-lock-bot

    This issue has been automatically locked due to inactivity.
    Please file a new issue if you are encountering a similar or related problem.

    Read more about our automatic conversation locking policy.

    This action has been performed automatically by a bot.

  4. locked and limited conversation to collaborators on Sep 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

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