设置 ng-multiselect-dropdown 的宽度

【问题标题】：set width of ng-multiselect-dropdown设置 ng-multiselect-dropdown 的宽度
【发布时间】：2019-10-15 23:49:04
【问题描述】：

我正在使用 ng-multiselect-dropdown。我想将其宽度设置为 100pt。

我已经尝试过使用一些 css

.multiselect-dropdown {
    widht:100pt;
}
.multiselect-dropdown .dropdown-btn {
    widht:100pt;
}

【问题讨论】：

标签： css angular6

【解决方案1】：

我定义了自定义类并给出了宽度。但要注意的是!important应用。它覆盖了宽度定义为 100% 的 ng-multiselect 的现有 css。

CSS

.custom-font-size .multiselect-dropdown .dropdown-btn {
    width: 100pt !important; 
}

HTML

<ng-multiselect-dropdown #reporteedropDown class="custom-font-size....">
</ng-multiselect-dropdown>

【讨论】：

【解决方案2】：

您可以参考以下代码：

CSS

::ng-deep .multiselect-dropdown .dropdown-btn {
    width: 97%;
}

【讨论】：

【解决方案3】：

更新 ng-multiselect-dropdown 的样式 :首先在多选中添加你自己/自定义的类，然后使用这个类作为父选择器

html

<ng-multiselect-dropdown
   class="customClass"
   [settings]="dropdownSettings"
   [data]="dropdownList"
   (onSelect)="onItemSelect($event)" 
   (onSelectAll)="onSelectAll($event)">
 </ng-multiselect-dropdown>

css

.customClass.dropdown-btn{
    width: 50% !important;
    border:1px solid red !important;
}

【讨论】：