Repository navigation
md-icon as input prefix / prefix on wide inputs #2586
Description
currently this happens when you try to use md-icon in a prefix
there two issues
-
icon is too big, which messes with input's alignment
-
icon is too wide, which messes with
display: table-celland 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)
Activity
[-]md-icon as input prefix[/-][+]md-icon as input prefix / prefix on wide inputs [/+]crisbeto commentedon 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 commentedon 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
kara commentedon Mar 4, 2017
Fixed by #3342
marshall007 commentedon Mar 7, 2017
@kara @mmalerba the same issue pops up when using
md-iconwithin anmd-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 commentedon Mar 8, 2017
Upon further investigation,
.mat-input-container .mat-iconis almost certainly the way to go in terms of future-proofing. I just noticedmd-hint > md-iconhas the same issue (and same resolution).angular-automatic-lock-bot commentedon Sep 5, 2019
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.