Recently, I encountered an issue with customizing CSS for angular2-multiselect-dropdown. I found the solution in this link: https://www.npmjs.com/package/angular2-multiselect-dropdown. I have included my code below. Any assistance in resolving this matter would be greatly appreciated. Thank you in advance.
I followed the instructions provided in the link but unfortunately, it did not work for me. Here is a snippet of the HTML Page:
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" [settings]="settings" (onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)">
To customize the CSS, the following code should be added to the CSS file:
.inputField {
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid #7C7C81;
width: 100%;
margin-bottom: 10px;
}
.inputField .c-token{
background: #38d574 !important;
}
.inputField .pure-checkbox label::before {
border-color: #38d574 !important;
}
.inputField .pure-checkbox input[type="checkbox"]:checked +
label[_ngcontent-c1]:before {
background: #38d574 !important;
}
.inputField .c-btn {
border: 0 !important;
outline: 0 !important;
background: transparent !important;
border-bottom: 1px solid #7C7C81 !important;
width: 100% !important;
margin-bottom: 10px !important;
}
For the .ts file:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {
itemList = [];
selectedItems = [];
settings = {};
constructor() { }
ngOnInit() {
this.itemList = [
{ "id": 1, "itemName": "India" },
{ "id": 2, "itemName": "Singapore" },
{ "id": 3, "itemName": "Australia" },
{ "id": 4, "itemName": "Canada" },
{ "id": 5, "itemName": "South Korea" },
{ "id": 6, "itemName": "Brazil" }
];
this.settings = {
text: "Select Countries",
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
classes: "myclass inputField"
};
}
onItemSelect(item: any) {
console.log(item);
console.log(this.selectedItems);
}
OnItemDeSelect(item: any) {
console.log(item);
console.log(this.selectedItems);
}
onSelectAll(items: any) {
console.log(items);
}
onDeSelectAll(items: any) {
console.log(items);
}
}