Angular Material md-slider：Vertical Slider在md-sidenav中不起作用

Question

实际行为：

问题是什么？ * md-slider不能垂直放置在md-sidenav https://material.angularjs.org/latest/demo/sidenav material.angularjs.org/latest/demo/slider

中

预期的行为是什么？ 当我将md-vertical属性添加到md-slider时，它在项目的任何部分都是垂直的，但是当放置在md-sidenav中时它保持水平

Plnkr显示问题https://embed.plnkr.co/7lBplI/ 详细信息：请注意，当侧边栏打开时，md-slider是水平的而不是垂直的，尽管有垂直属性Angular Versions：* 角度版本：1.5.3 角度材料版本：1.0.9 附加信息：

浏览器类型：* chrome：最新版本 浏览器版本：* Chrome：最新 操作系统：* Mac：OSX 10.10.5

Answer 1

我认为这是因为您使用的是旧版Angular Material。根据 angular-material.js 文件的标题，它会显示版本 v0.5.1 。我认为您已将所有缩小的JS文件合并到 docs.js 中，并且无法查看其中的版本或 angular-material.min.js < /强>

我已经删除了您的示例 - Plunker - 以匹配正常工作的CodePen示例。如您所见，CodePen按预期工作。

将Angular Material更新为最新版本（ v1.1.0 ），它应该可以正常工作。

CodePen标记

<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" md-disable-backdrop="" md-whiteframe="4">
  <div layout-padding="" ng-controller="LeftCtrl">
    <md-slider-container flex>
      <md-slider ng-model="vol" min="0" max="100" aria-label="volume" id="volume-slider" class="md-accent" md-vertical md-range>
      </md-slider>
  <h5>Volume</h5>
  </md-slider-container>
    <p hide="" show-gt-md="">
      This sidenav is locked open on your device. To go back to the default behavior,
      narrow your display.
    </p>
  </div>
</md-sidenav>

<md-content flex="" layout-padding="">
  <div layout="column" layout-fill="" layout-align="top center">
    <div>
      <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
        Toggle left
      </md-button>
    </div>
  </div>
</md-content>