如何在 angular material 中调整 select 内的进度条布局

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>

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

Codepen link: 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

如何在 angular material 中调整 select 内的进度条布局

How can I adjust progressbar layout inside select in angular material

css

angular-material