CODEWITHSUNDEEP
angularjsangular-material
mindparse
mindparse

Reputation: 7275

Unable to right align md-icon inside md-input-container on latest version of Angular Material

I am upgrading an application from Angular Material 1.0.5 to 1.0.9

I currently have a few input containers containing select and icon elements like so

<md-input-container class="md-icon-right" flex>
    <label>Something</label>
    <md-select ng-model="option2" flex>
            <md-option ng-repeat="option in options">
            </md-option>
        </md-select>
    <md-icon class="material-icons">X</md-icon>
</md-input-container>

So this would mean I get the icon appearing to the right of the select input.

After upgrading to 1.0.9, using the same markup as above, the icon now appears to the left.

I have looked at the input examples on the demo's page for AM 1.0.9 and I can't see anything has changed across the versions.

Here's how it should look with 1.0.5 - http://codepen.io/parky128/pen/rLWJNK

Just change the material script includes to 1.0.9 and you will see, in fact this happens from 1.0.6 onwards.

Notice as well this only seems to be an issue when using an md-select, regular inputs don't get affected by this.

I can't see any breaking changes in their change log to say why this would happen.

Anyone know how I can get the icon to align to the right when using an md-select inside the md-input-container for version 1.0.6 upwards?

Thanks

Upvotes: 2

Views: 2024

Answers (1)

camden_kid
camden_kid

Reputation: 12813

If you inspect the CSS of the md-icon for version 1.0.5 you will see the following:

enter image description here

md-input-container.md-icon-right>md-icon:last-of-type {
  margin: 0;
  right: 2px;
  left: auto;
}

This is defined in angular-material.min.css.

This does not appear when you inspect the md-icon for version 1.0.9:

enter image description here

If you add the above CSS to your own CSS file it will work with version 1.0.9 - CodePen

The other thing to note is that the md-input-container is shifted to the left. This can be fixed (after further inspection) by the following CSS:

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

Upvotes: 5

Related Questions