Javascript 角材质需要持久的滚动条_Javascript_Html_Css_Angularjs_Angular Material

Javascript 角材质需要持久的滚动条

javascript html css angularjs angular-material

Javascript 角材质需要持久的滚动条,javascript,html,css,angularjs,angular-material,Javascript,Html,Css,Angularjs,Angular Material,使用，我试图让下拉菜单有一个持久的滚动条。理想情况下，当内容长于/大于下拉菜单的可视高度时，应显示垂直滚动条我已尝试在md select和md input container元素上使用overflow和overflow-y属性设置为scroll，但没有效果。不确定该做什么，但这就是我尝试过的（和）：持久滚动条有棱角的 .module（'MyApp'，['ngMaterial'，'ngMessages'，'material.svgAssetsCache']）） .controller（'D

使用，我试图让下拉菜单有一个持久的滚动条。理想情况下，当内容长于/大于下拉菜单的可视高度时，应显示垂直滚动条

我已尝试在

md select

和

md input container

元素上使用

overflow

和

overflow-y

属性设置为

scroll

，但没有效果。不确定该做什么，但这就是我尝试过的（和）：


持久滚动条
有棱角的
.module（'MyApp'，['ngMaterial'，'ngMessages'，'material.svgAssetsCache']））
.controller（'DemoCtrl'，函数（$scope）{
$scope.user={
声明：“CA”
};
$scope.states=（'AL AK AZ AR CA CO CT DE FL GA HI ID IL IN a KS KY LA ME MD MA MI MN MS'+
“新罕布什尔州东北部新罕布什尔州西北部北北东正常或北东正常或北西南通SD TN TX UT VT VA WA WV WI”+
“WY”）.split（“”）.map（函数（状态）{
返回{abbrev:state}；
})
})
陈述
{{state.abbrev}

一个有效的例子（例如Plunker）可以帮助您获得答案。下面是一个

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Persistent Scrollbar</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

    <link rel='stylesheet prefetch' href='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.5/angular-material.css'>
    <link rel='stylesheet prefetch' href='https://material.angularjs.org/1.0.5/docs.css'>
    <script>
    angular
  .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('DemoCtrl', function($scope) {
    $scope.user = {
      state: 'CA'
    };

    $scope.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
    'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
    'WY').split(' ').map(function(state) {
        return {abbrev: state};
      })
  })

    </script>

  </head>

  <body>

  <div ng-controller="DemoCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage" ng-app="MyApp">

  <md-content layout-padding="">
    <div>
      <form name="userForm">
        <div layout-gt-sm="row">

          <md-input-container class="md-block" flex-gt-sm="">
            <label>State</label>
            <md-select ng-model="user.state">
              <md-option ng-repeat="state in states" value="{{state.abbrev}}">
                {{state.abbrev}}
              </md-option>
            </md-select>
          </md-input-container>

        </div>

      </form>
    </div>
  </md-content>

</div>

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js'></script>
<script src='http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.5/angular-material.js'></script>

  </body>
</html>