CODEWITHSUNDEEP
angulardropdown
c0micrage
c0micrage

Reputation: 1180

No theme applied to angular2-multiselect-dropdown in Angular code

I just added the AngularMultiSelectModule from the following url

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

I got the dropdown control populated with months of the year but there is no theme applied as shown on the demo page.

I read that the default.theme.css needs to be added. I copied and pasted the css content to the angular component .scss file but still no them. I even copied the default.theme.css to the folder and it still does not work.

I read the steps and I copied the their code but no success yet. In the dropdownsetting, I see the demo code has the "myclass custom-class" but not sure how to get it to work so far.

Here is my code so far. Any help is appreciated. Thanks.

HTML:

TS:

this.dropdownList = [
      {"id":1,"itemName":"January"},
      {"id":2,"itemName":"Febuary"},
      {"id":3,"itemName":"March"},
      {"id":4,"itemName":"April"},
      {"id":5,"itemName":"May"},
      {"id":6,"itemName":"June"},
      {"id":7,"itemName":"July"},
      {"id":8,"itemName":"August"},
      {"id":9,"itemName":"September"},
      {"id":10,"itemName":"October"},
      {"id":11,"itemName":"November"},
      {"id":12,"itemName":"December"}
    ];
    this.selectedMonths = this.dropdownList;

    this.dropdownSettings = { 
          singleSelection: false, 
          text:"Select Months",
          selectAllText:'Select All',
          unSelectAllText:'UnSelect All',
          enableSearchFilter: true,
          classes:"myclass custom-class"
        };

I copied the following from the default.theme.css to my component.scss

.c-btn {
  background: #fff;
  border: 1px solid #ccc;
  color: #333; }

.selected-list .c-list .c-token {
  background: #0079FE; }
  .selected-list .c-list .c-token .c-label {
    color: #fff; }
  .selected-list .c-list .c-token .c-remove svg {
    fill: #fff; }

.selected-list .c-angle-down svg, .selected-list .c-angle-up svg {
  fill: #333; }

.dropdown-list ul li:hover {
  background: #f5f5f5; }

.arrow-up, .arrow-down {
  border-bottom: 15px solid #fff; }

.arrow-2 {
  border-bottom: 15px solid #ccc; }

.list-area {
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0px 1px 5px #959595; }

.select-all {
  border-bottom: 1px solid #ccc; }

.list-filter {
  border-bottom: 1px solid #ccc; }
  .list-filter .c-search svg {
    fill: #888; }
  .list-filter .c-clear svg {
    fill: #888; }

.pure-checkbox input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before {
  border-color: #0079FE;
  background-color: #f2f2f2; }

.pure-checkbox input[type="checkbox"] + label {
  color: #000; }

.pure-checkbox input[type="checkbox"] + label:before {
  color: #0079FE;
  border: 2px solid #0079FE; }

.pure-checkbox input[type="checkbox"] + label:after {
  background-color: #0079FE; }

.pure-checkbox input[type="checkbox"]:disabled + label:before {
  border-color: #cccccc; }

.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {
  background-color: #cccccc; }

.pure-checkbox input[type="checkbox"] + label:after {
  border-color: #ffffff; }

.pure-checkbox input[type="radio"]:checked + label:before {
  background-color: white; }

.pure-checkbox input[type="checkbox"]:checked + label:before {
  background: #0079FE; }

.selected-item {
  background: #e9f4ff; }

.btn-iceblue {
  background: #0079FE;
  border: 1px solid #ccc;
  color: #fff; }

Upvotes: 1

Views: 1725

Answers (1)

c0micrage
c0micrage

Reputation: 1180

The website instructs to add to the angular.json file, which did not work for me. I added to the global style.scss file and it worked.

Upvotes: 2

Related Questions