【问题标题】：angular-2-dropdown-multiselect - Customize width 100%angular-2-dropdown-multiselect - 自定义宽度 100%
【发布时间】：2017-10-12 13:38:58
【问题描述】：

我正在实现这个 angular-2-dropdown-multiselect 组件：

https://www.npmjs.com/package/angular-2-dropdown-multiselect

组件可以正常工作，但我需要将其设置为适合容器...

我认为我只需要在某处添加“width:100%”，但我不知道我必须在哪里做。

另一个考虑：

组件在 Bootstrap 应用程序中实现。

我已将组件放在如下表格中：

<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>

考虑：

可能是考虑从引导表切换到引导表单应该默认使列表框适合容器...

感谢支持

【问题讨论】：

标签： css twitter-bootstrap angular

【解决方案1】：

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
[settings]="dropdownSettings" 
></angular2-multiselect>

最大高度：100 您可以在各自的组件 ts 文件中设置下拉菜单的 maxHeight

this.dropdownSettings = { 单选：假， text: "选择用户", selectAllText: '全选', unSelectAllText: '取消全选', 启用搜索过滤器：真，类：“myclass 自定义类”， 最大高度：150 };

https://www.npmjs.com/package/angular2-multiselect-dropdown

【讨论】：

【解决方案2】：

我不知道你想设置它的宽度。是按钮还是下拉菜单？

无论如何，你可以像这样在父组件的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 的 Component Styles 页面

【讨论】：

【解决方案3】：

你也可以使用'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>

【讨论】：