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

问题描述 投票:0回答:4

我正在实现这个 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
4个回答
3
投票
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
[settings]="dropdownSettings" 
></angular2-multiselect>
  • 最大高度:100 您可以在各自组件 ts 文件的设置中设置下拉菜单的 maxHeight

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

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


1
投票

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

无论如何,你可以在父组件的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 页面


0
投票

您还可以使用“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>

0
投票

在最新版本中,dropdown-multi select 自动添加 300px 作为默认高度。 但你可以使用这个类进行自定义

::ng-deep .dropdown-list .list-area div[style*="overflow: auto"] {
  max-height: 9rem !important;
}
© www.soinside.com 2019 - 2024. All rights reserved.