如何禁用 md-menu 中的滚动?
how to disable scroll in md-menu?
我用angular-material。我想隐藏菜单中的滚动条。并且只有固定高度的菜单。但它的高度不足以禁用滚动。
这是我的代码:
<md-toolbar ng-init="vm.hasLogged()" class="sidebar-left-toolbar" md-theme="{{::triSkin.elements.logo}}">
<md-menu md-offset="-200 56">
<h2 flex class="sidebar-left-title" ng-click="$mdOpenMenu()">{{::vm.sidebarInfo.appName}}</h2>
<md-menu-content aria-label="open menu" width="4" style="height1: 250px">
<md-menu-item >
<md-button md-prevent-menu-close="md-prevent-menu-close">
Setup
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Work
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Reports
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Workflow
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Cuan
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Admin
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-if="vm.isLogged" ng-click="vm.logout()">
Logout
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
我试过使用 style="height: xxx" 它使菜单变小。但不会更大
您可以使用 CSS - CodePen
CSS
md-menu-content {
overflow-y: hidden;
min-height: 400px;
}
此解决方案的唯一问题是它会影响所有菜单。似乎没有办法像其他 AM 指令那样将 class 分配给菜单。
这是一个老问题,但我遇到了同样的问题。
我是这样解决的:
<md-menu-content width="4" class="maxHeightNone">
.maxHeightNone{
max-height: none;
}
这样就不需要指定min-height了,它会适配md-menu的内容。
我用angular-material。我想隐藏菜单中的滚动条。并且只有固定高度的菜单。但它的高度不足以禁用滚动。 这是我的代码:
<md-toolbar ng-init="vm.hasLogged()" class="sidebar-left-toolbar" md-theme="{{::triSkin.elements.logo}}">
<md-menu md-offset="-200 56">
<h2 flex class="sidebar-left-title" ng-click="$mdOpenMenu()">{{::vm.sidebarInfo.appName}}</h2>
<md-menu-content aria-label="open menu" width="4" style="height1: 250px">
<md-menu-item >
<md-button md-prevent-menu-close="md-prevent-menu-close">
Setup
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Work
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Reports
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Workflow
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Cuan
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Admin
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-if="vm.isLogged" ng-click="vm.logout()">
Logout
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
我试过使用 style="height: xxx" 它使菜单变小。但不会更大
您可以使用 CSS - CodePen
CSS
md-menu-content {
overflow-y: hidden;
min-height: 400px;
}
此解决方案的唯一问题是它会影响所有菜单。似乎没有办法像其他 AM 指令那样将 class 分配给菜单。
这是一个老问题,但我遇到了同样的问题。
我是这样解决的:
<md-menu-content width="4" class="maxHeightNone">
.maxHeightNone{
max-height: none;
}
这样就不需要指定min-height了,它会适配md-menu的内容。