css - 如何调整 Angular Material 中选择内的进度条布局

Question

我有以下 Angular Material 代码

<div ng-app="MyApp" ng-controller="AppCtrl as ctrl">
  <md-input-container>
    <label>SOME_LABEL</label>
    <md-select ng-model="some.model">
      <md-option value="SOME_OPTION_HERE" ng-disabled="$index === 1">
        SOME_OPTION_HERE
        <md-progress-linear md-mode="determinate" value="25"></md-progress-linear>
      </md-option>
      <md-option value="SOME_OTHER_OPTION_HERE" ng-disabled="$index === 1">
        SOME_OTHER_OPTION_HERE
        <md-progress-linear md-mode="determinate" value="35"></md-progress-linear>
      </md-option>
    </md-select>
  </md-input-container>
</div>

它在选项底部显示进度条，但当选择下拉菜单可见时，它们不是 100% 宽。此外，当选择一个选项时，进度条会被垂直剪裁。如何在选择选项后显示完整的进度条高度并显示 100% 宽度的进度条？

Codepen 链接:http://codepen.io/anon/pen/XdjaeK

Answer 1

将 md-option ._md-text 的 width 设置为 100%，而不是 auto。

然后它采用它所在元素的完整宽度，而不是选项名称的宽度。

md-option ._md-text {
  width: 100%;
}

编辑

另一个问题是因为 ._md-select-value *:first-child 的高度。我也更新了我的 CodePen 来解决这个问题。

._md-select-value {
  height: 50px; /*Set height for select */
}

._md-select-value *:first-child {
  height: 30px; /*Set height for selected value (including bar)
}

在这里查看我的更新 CodePen:http://codepen.io/anon/pen/wGzqxb