如何在角度材料中选择内部调整进度条布局

Question

我有以下角度材质代码

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

It shows the progressbars at the bottom of the option, but they are not 100% wide when select dropdown is visible.此外，选择选项时，将垂直剪切进度条。如何在选择选项后显示完整的进度条高度并显示 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