set width of ng-multiselect-dropdown

Question

I am using ng-multiselect-dropdown. I want to set its width to 100pt.

I already tried using some css

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

Answer 1

I defined custom class and gave width. But point to note is !important application. It overrides existing css of ng-multiselect where width is defined as 100%.

CSS

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

HTML

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

Answer 2

You can reference following code:

CSS

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

Answer 3

Update the style of ng-multiselect-dropdown :first add your own/custom class in multiselect and then use this class as parent selector

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