[英]How to customize md-select's popup menu in Angular Material?
I need to define a special class for some md-select
's popup menus (not to all). 我需要为某些md-select
的弹出菜单定义一个特殊的类(不是全部)。 But I have no idea how to do that. 但我不知道该怎么做。
Here is a code sample of typical usage and here is no place where I can define a class for menu container that will appear. 这是典型用法的代码示例,这里我没有可以为将出现的菜单容器定义类的地方。
<md-input-container md-no-float class="md-block defaultInputSelect filterType">
<md-select ng-model="value.filter_type" md-on-close="viewChanged()">
<md-option ng-repeat="(key, value) in filterTypes" value="{{value}}">
{{filterTypesNames[key]}}
</md-option>
</md-select>
</md-input-container>
Actually, I want to change the width of popup menu. 实际上,我想改变弹出菜单的宽度。 By default it is limited by the width of md-select
. 默认情况下,它受md-select
的宽度限制。
Hi there please look at the following plunkr, the following selector seems to work fine to affect the whole component 您好,请看下面的plunkr,以下选择器似乎工作正常影响整个组件
https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview
<style type="text/css">
md-input-container,
md-input-container > * {
width: 100% !important;
}
</style>
Edit: Here you go, this will only affect the select dropdown 编辑:在这里,这只会影响选择下拉列表
https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview
<style type="text/css">
._md-select-menu-container
{
width: 100% !important;
}
</style>
Final Edit: Simply add the md-container-class="myclass" directive to your md-select 最终编辑:只需将md-container-class =“myclass”指令添加到md-select即可
https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview
<style type="text/css">
.myclass {
width: 100% !important;
}
</style>
<md-select md-container-class="myclass" ng-model="selectedItem" md-selected-text="getSelectedText()">
<md-optgroup label="items">
<md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
</md-optgroup>
</md-select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.