Can't Override the default css style in ng-multiselect-dropdown in angular 6

Question

I am using ng-multiselect-dropdown.I want to change the default style but it cannot override.I tried to given the style in index.html,angular.json,style.css files and also i tried inline style but nothing was changed.

Css tried:

 ng-multiselect-dropdown .multiselect-dropdown > .dropdown-btn{
font-size:12px;
}

ts:

styles: [".multiselect-dropdown .dropdown-btn{
        font-size:12px;
        }"]

another way:

multiselect-dropdown .dropdown-btn{
    font-size:12px;
    }

another way:

 multiselect-parent .dropdown-btn{
    font-size:12px;
    }

html:

 <ng-multiselect-dropdown  [placeholder]="'Select'" [data]="xxx" [(ngModel)]="xxx" name="Name" [settings]="dropdownSettings" [textField]="'Name'">
 </ng-multiselect-dropdown>

How to achieve this?I tried everything related to this question.So please don't say duplicate question.

Please share your HTML code.

Nik
– Nik

2018-11-19 09:53:31 +00:00
Commented Nov 19, 2018 at 9:53 — Nik
– Nik, Commented Nov 19, 2018 at 9:53
Updated the code above

vino
– vino

2018-11-19 10:00:49 +00:00
Commented Nov 19, 2018 at 10:00 — vino
– vino, Commented Nov 19, 2018 at 10:00

Sheik Althaf · Accepted Answer · 2018-11-21 12:32:24Z

10

Please use css like this to override default value

ng-multiselect-dropdown /deep/ .multiselect-dropdown > .dropdown-btn{
   font-size:12px !important;
}

Alternative

:host /deep/ .multiselect-dropdown .dropdown-btn {
   font-size:12px !important;
}

Add to global style `src/styles.css`

.custom-font-size .multiselect-dropdown .dropdown-btn {
   font-size:12px !important;
}

then add this class custom-font-size to dropdown component

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

edited Nov 21, 2018 at 12:32

answered Nov 19, 2018 at 9:52

Sheik Althaf

1,61511 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Sheik Althaf Over a year ago

Please set important. /deep/ is used to apply css to another compontent who css is written in it own template css. Please look into this angular.io/guide/component-styles#deprecated-deep--and-ng-deep

vino Over a year ago

I tried both of your code but unluckily does not work.

Sheik Althaf Over a year ago

Please update a files component names in your questions. I tried and it is working fine

vino Over a year ago

I can't get you which component names

vino Over a year ago

Hey Its Working.Thank you for Your help.

|

rsangin · Accepted Answer · 2018-11-19 10:16:38Z

3

First of all you must be sure that this component is added inside of your component, because some components are added to body.
If this component has been added to your component you can use the css below inside your component css file:

:host::ng-deep ng-multiselect-dropdown .multiselect-dropdown > .dropdown-btn{
     font-size:12px;
}

If this has been added to body the only way is to put your css in styles.css file.

ng-multiselect-dropdown .multiselect-dropdown > .dropdown-btn{
     font-size:12px;
}

answered Nov 19, 2018 at 10:16

rsangin

5083 silver badges9 bronze badges

2 Comments

vino Over a year ago

The defalut style is in node modules folder

rsangin Over a year ago

No, It's in src folder

Yashwardhan Pauranik · Accepted Answer · 2018-11-19 10:16:24Z

2

You can try adding encapsulation: ViewEncapsulation.None inside your component decorator where you are using this ng-multiselect-dropdown.

Angular comes with view encapsulation built in, which enables us to use Shadow DOM or even emulate it. There are three view encapsulation types:

ViewEncapsulation.None - No Shadow DOM at all. Therefore, also no style encapsulation.

ViewEncapsulation.Emulated - No Shadow DOM but style encapsulation emulation.

ViewEncapsulation.Native - Native Shadow DOM with all it’s goodness.

Eg-:-

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  encapsulation: ViewEncapsulation.None
})

edited Nov 19, 2018 at 10:16

answered Nov 19, 2018 at 9:59

Yashwardhan Pauranik

5,5865 gold badges45 silver badges77 bronze badges

3 Comments

vino Over a year ago

Nothing was changed

Yashwardhan Pauranik Over a year ago

You need to add this in the component where you are using your ng-multiselect

vino Over a year ago

Yes.I used In the component where i used ng-multiselect-dropdown.But its not work

Divesh Chakrayat · Accepted Answer · 2023-06-28 19:47:32Z

This will definitely help you

override selected item

:host ::ng-deep {
   .multiselect-dropdown {
    .dropdown-btn{
     .selected-item{
       background: #00b8aa !important;
       border: #00b8aa !important;
     }
    }
  }
}

override checkbox

:host::ng-deep ng-multiselect-dropdown .multiselect-item-checkbox 
  input[type=checkbox]:checked + div:before {
  background:#00b8aa !important;
}

:host::ng-deep ng-multiselect-dropdown .multiselect-item-checkbox 
    input[type=checkbox] + div:before {
    border: 2px solid #00b8aa !important;
}

Collectives™ on Stack Overflow

Can't Override the default css style in ng-multiselect-dropdown in angular 6

4 Answers 4

Alternative

Add to global style `src/styles.css`

9 Comments

2 Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Alternative

Add to global style src/styles.css

9 Comments

2 Comments

3 Comments

Comments

Related

Add to global style `src/styles.css`