代价：

Question

我正在实施 angular-2-dropdown-multiselect 组件：

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

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

我认为我只需要在某处添加“宽度：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>

代价：

考虑到从bootstrap表切换到bootstrap表单，可能会导致列表框默认适合容器...

感谢支持

Answer 1

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

<强> maxHeight：100 您可以在相应组件ts文件的设置中设置下拉列表的maxHeight

this.dropdownSettings = { singleSelection：false，文字：“选择用户”， selectAllText：'全选'， unSelectAllText：'UnSelect All'， enableSearchFilter：true，课程：“myclass custom-class”，的 maxHeight：150 };

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

Answer 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页面

Answer 3

您也可以使用＆＃39; colspan＆＃39;

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

angular-2-dropdown-multiselect - 自定义宽度100％

代价：

3 个答案: