CODEWITHSUNDEEP
angular
arunkumar
arunkumar

Reputation: 353

Change button styles for ngx-ui-switch angular 2

I'm using ngx-ui-switch for switch buttons. I wanted to give custom size for the buttons.

This plugin generates some css which is not found in my project folder.

If i try to change it manually like .switch-small[_ngcontent-c20] {size:40px} is not working. Please help

Original HTML 

<ui-switch [checked]="staticProposalFlag" (change)="onProposalChange($event)" size="small" class="float-left" switchColor="#D9D9D9" color="#1D79D1"></ui-switch>

Generated HTML 

<ui-switch _ngcontent-c13="" class="float-left" color="#1D79D1" size="small" switchcolor="#D9D9D9" _nghost-c20="" ng-reflect-size="small" ng-reflect-color="#1D79D1" ng-reflect-switch-color="#D9D9D9" ng-reflect-checked="true">
  <span _ngcontent-c20="" class="switch checked switch-small" style="background-color: rgb(29, 121, 209); border-color: rgb(223, 223, 223);">
    <small _ngcontent-c20="" style="background: rgb(217, 217, 217);">
    </small>
    </span>
</ui-switch>

Upvotes: 0

Views: 3545

Answers (3)

Dan Thory
Dan Thory

Reputation: 257

I had an issue with the UI switch creating a black border / outline after being clicked, i can confirm that krithika's solution above works:

::ng-deep button.switch {
  outline: none !important;
}

Upvotes: 1

krithika
krithika

Reputation: 381

For those who want to change the CSS of UI switch, use ::ng-deep and !important together. Only that works in my case.

Example:

::ng-deep .switch-small.checked small {
    left: 16px !important;
}

Upvotes: 4

andrea06590
andrea06590

Reputation: 1299

You cannot change the CSS of the component itself with the ng identifier added before, so try to add a real class instead of float left which is a style rule. Create a class customSwitch (replace float:left). And in your CSS add .switchCustom { float:left; width: 100px } + remove size=small it looks like a parameter that could be in conflict when trying to set the width.

Upvotes: 0

Related Questions