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

Question

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

我目前有一些包含选择和图标元素的输入容器，如下所示

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

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

升级到 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 时的问题，常规输入不会受此影响。

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

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

谢谢

Answer 1

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

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

这是在angular-material.min.css中定义的。

当您检查版本 1.0.9 的 md-icon 时，不会出现此信息:

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

另一件事需要注意的是，md-input-container 向左移动。这可以通过以下 CSS 修复(进一步检查后):

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