Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

md-icon as input prefix / prefix on wide inputs #2586

Closed
fxck opened this issue Jan 10, 2017 · 6 comments · Fixed by #3489
Closed

md-icon as input prefix / prefix on wide inputs #2586

fxck opened this issue Jan 10, 2017 · 6 comments · Fixed by #3489
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@fxck
Copy link
Contributor

fxck commented Jan 10, 2017

currently this happens when you try to use md-icon in a prefix
image

there two issues

  1. icon is too big, which messes with input's alignment
    image

  2. icon is too wide, which messes with display: table-cell and pushes the input unreasonably far right

should this even supported? I could work on it I guess

also why is table cell used instead of flex? it's hacky and puts way too much space around prefix even if I used $(if my md-input is wide)
image

@fxck fxck changed the title md-icon as input prefix md-icon as input prefix / prefix on wide inputs Jan 10, 2017
@crisbeto
Copy link
Member

crisbeto commented Jan 10, 2017

In regards to flexbox, I agree that it would be better to use. Otherwise I think that #2496 may fix this issue in particular.

@fxck
Copy link
Contributor Author

fxck commented Jan 10, 2017

it will probably fix the stretching(but I think it would still be worth converting it to flex instead), but not the vertical alignment

@jelbourn jelbourn added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Jan 27, 2017
@mmalerba mmalerba added the has pr label Mar 1, 2017
@kara
Copy link
Contributor

kara commented Mar 4, 2017

Fixed by #3342

@kara kara closed this as completed Mar 4, 2017
@marshall007
Copy link
Contributor

@kara @mmalerba the same issue pops up when using md-icon within an md-placeholder. I wasn't sure if I should create a separate issue or if you just want to reopen this one as it's essentially the same bug.

This is solved by applying the same fix from #3342 to .mat-input-placeholder .mat-icon. Alternatively, it seems that all three cases (prefix/suffix/placeholder) could potentially be handled more generally as .mat-input-container .mat-icon.

@marshall007
Copy link
Contributor

Upon further investigation, .mat-input-container .mat-icon is almost certainly the way to go in terms of future-proofing. I just noticed md-hint > md-icon has the same issue (and same resolution).

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants