我正在实现这个角度 2 下拉列表多选组件:
https://www.npmjs.com/package/angular-2-dropdown-multiselect
该组件工作正常,但我需要将其设置为适合容器...
我认为我只需要在某处添加">宽度:100%",但我不知道我必须在哪里做。
另一个考虑因素:
该组件在引导应用程序中实现。
我已将组件放在一个表中,例如:
<table class="table">
<tr>
<td>Search</td>
<td><ss-multiselect-dropdown [options]="myOptions" [texts]="myTexts" [settings]="mySettings" [(ngModel)]="optionsModel" [ngModelOptions]="{standalone: true}"></ss-multiselect-dropdown></td>
</tr>
</table>
考虑:
可能是考虑从引导表切换到引导表单应该使列表框默认适合容器......
感谢支持
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
[settings]="dropdownSettings"
></angular2-multiselect>
最大高度:100您可以在相应组件 ts 文件的设置中设置最大高度下拉列表
this.dropdownSettings = { 单选:假, 文本:"选择用户", 选择全部文本:"全选", 取消全选文本:"取消全选", enableSearchFilter: true, 类:"MyClass 自定义类", 最大高度:150 };
https://www.npmjs.com/package/angular2-multiselect-dropdown
你想设置它的宽度。是按钮还是下拉菜单?
无论如何,您可以在父组件的 css 文件中设置宽度,如下所示:
对于按钮:
ss-multiselect-dropdown > div.btn-group {
width: 100%;
}
对于下拉菜单:
ss-multiselect-dropdown > div.btn-group > ul.dropdown-menu {
width: 100%;
}
如果它不起作用,您可能需要像这样使用深度样式:
:host >>> ss-multiselect-dropdown > div.btn-group {
width: 100%;
}
:host >>> ss-multiselect-dropdown > div.btn-group > ul.dropdown-menu {
width: 100%;
}
您应该查看 Angular.io 的组件样式页面
你也可以使用'colspan'
<table class="table">
<tr>
<td>Search</td>
<td colspan="#ofColumnsToSpan"><ss-multiselect-dropdown [options]="myOptions" [texts]="myTexts" [settings]="mySettings" [(ngModel)]="optionsModel" [ngModelOptions]="{standalone: true}"></ss-multiselect-dropdown></td>
</tr>
</table>