无法在最新版本 Angular Material 上右对齐 md-input-container 内的 md-icon

Question

我正在将应用程序从 Angular Material 1.0.5 升级到 1.0.9

我目前有一些包含 select 和图标元素的输入容器

<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>

所以这意味着我的图标出现在 select 输入的右侧。

升级到 1.0.9 后，使用与上面相同的标记，图标现在显示在左侧。

我查看了 AM 1.0.9 演示页面上的输入示例，但我看不出各个版本有任何变化。

这是 1.0.5 的外观 - http://codepen.io/parky128/pen/rLWJNK

只需将 material 脚本包含更改为 1.0.9，您就会看到，实际上从 1.0.6 开始就会发生这种情况。

请注意，这似乎只是在使用 md-select 时才会出现的问题，常规输入不会受此影响。

我在他们的更改日志中看不到任何重大更改来说明为什么会发生这种情况。

有人知道在 md-input-container 1.0.6 以上版本中使用 md-select 时如何让图标右对齐吗？

谢谢

Answer 1

如果您检查 md-icon 的 CSS 版本 1.0.5，您将看到以下内容：

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

这个定义在angular-material.min.css.

当您检查 md-icon 版本 1.0.9 时，这不会出现：

如果您将以上 CSS 添加到您自己的 CSS 文件中，它将适用于版本 1.0.9 - CodePen

另一件需要注意的事情是 md-input-container 向左移动。这可以通过以下 CSS:

修复（在进一步检查后）

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

无法在最新版本 Angular Material 上右对齐 md-input-container 内的 md-icon

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

angularjs

angular-material