mdInputContainer: Has padding-left using .md-icon-right with only md-icon on the right side

[zaans2]

Version: 1.0.0
OS: Windows 10
Browser: Chrome 47

Right now md-input-container has a padding left if it has the class .md-icon-right, even if the only icon present is on the right side.

<md-input-container class="md-icon-right">
  <input type="text"></input>
  <md-icon md-font-set="material-icons">clear</md-icon>
</md-input-container>

Example: http://codepen.io/anon/pen/wMMQde
you can see the top md-input-container is the entire width while the bottom one has a padding-left. The third one has the fix below.

This is easily fixed by adding a class like md-icon-right-only and using the following CSS

md-input-container.md-icon-right.md-icon-right-only{
    padding-left: 0;
}

md-input-container.md-icon-right.md-icon-right-only > label{
     left: 0;
}

This removes the padding-leftfrom the md-input-container and repositions the label accordingly.

[chet-manley]

Using a class for right only is a little messy, IMO. The root issue, is that, because there is no md-icon-left class, the underlying logic looks for any icon (regardless of position), then adds the md-has-icon class, which in turn adds 36px of left padding to the parent and moves the label 36px from the left.

Here are the broken selectors:

md-input-container.md-icon-right
Adds 36px of left padding to md-input-container. Even if the md-has-icon class did not exist, the issue would persist.

md-input-container.md-has-icon > label
Adds 35px from the left of absolute position.

Possible solutions:

1)
This is the most obvious solution. Let md-has-icon class imply left alignment, and override with md-icon-right.
So, change:
md-input-container.md-has-icon > label
To:
md-input-container.md-has-icon:not(.md-icon-right) > label

Fix left padding:
md-input-container.md-icon-right { padding-right: 36px; padding-left: 0; }

2)
Explicitly require md-icon-left or md-icon-right.
Replace:
md-input-container.md-has-icon
With:
md-input-container.md-icon-left { padding-left: 36px; padding-right: 0; }

Replace:
md-input-container.md-icon-left > label
With:
md-input-container.md-icon-left > label { left: 36px; right: auto; }

Fix left padding
md-input-container.md-icon-right { padding-right: 36px; padding-left: 0; }

[zaans2]

The problem with this solution is that you can have either an md-icon on the left or the right, not both if you wanted to.

[chet-manley]

I can't think of a use where you would need that, but if it is required, add a second (technically third, with "md-has-icon") class: "md-icon-both". The current styling is mis-classed. No extra class aligns the icon left with "md-has-icon", and "md-icon-right" adds room for two icons by default. The method in the codepen below allows for all three scenarios.
http://codepen.io/chet-manley/pen/VeaGZa

edit
Added textarea to codepen as proof-of-concept.

[zaans2]

It is used in the demo that way. Here they denote that the input is the amount of a donation with a gift icon and they denote the currency with the euro sign icon.

[chet-manley]

The only reason the demo works, is because "md-icon-right" is technically broken, as proven by your first demo.

[zaans2]

I linked the demo to show that there is a use for it and that it probably should be supported.

Fix works beautifully by the way.

[aldo-roman]

Hi, I still see same issue with 1.0.1, is this planned for a future release? Thanks

[ngehlert]

i have still the same issue in the latest 1.0.8 version. will this be fixed in 1.1 or anytime soon?

[ttvd94]

I have same problem. My page is RTL so I think that's causing the problem. Any fix?

[Splaktar]

@ttvd94 this was fixed in 1.0.4. What version are you using? Please open a new issue with a CodePen that demonstrates the issue.