p-inputSwitch change size

UI Components for Angular
Post Reply
vimbsoft
Posts: 5
Joined: 04 Jun 2022, 23:03

05 Aug 2022, 14:45

Hi all,

is there a way to change the size of the InputSwitch?

I tried the following (inline style), but it doesn't work

Code: Select all

<p-inputSwitch [(ngModel)]="createUserAccount" [style]="{'width':'4rem;', 'height':'2.3rem;'}"></p-inputSwitch>
Best regards
beks

gbrbd
Posts: 3
Joined: 05 Aug 2022, 08:09

08 Aug 2022, 11:30

Hi

This is how we did this:

In global css:

Code: Select all

.small-input-switch {

  .p-inputswitch {
    height: 1.2rem;
    width: 2.4rem;
    &.p-inputswitch-checked {
        .p-inputswitch-slider::before {
            transform: translateX(1rem);
        }
    }

    .p-inputswitch-slider::before {
        width: 0.9rem;
        height: 0.9rem;
        margin-top: -0.45rem;
    }
  }
}

Code: Select all

<p-inputSwitch class="small-input-switch p-mr-2" (ngModelChange)="onChange($event)" [(ngModel)]="value"></p-inputSwitch>
Or you can do it with ::ng-deep.

vimbsoft
Posts: 5
Joined: 04 Jun 2022, 23:03

08 Aug 2022, 22:58

thanks for your reply

topedpilot
Posts: 1
Joined: 13 Oct 2022, 20:16

13 Oct 2022, 20:24

gbrbd wrote:
08 Aug 2022, 11:30
Hi

This is how we did this:

In global css:

Code: Select all

.small-input-switch {

  .p-inputswitch {
    height: 1.2rem;
    width: 2.4rem;
    &.p-inputswitch-checked {
        .p-inputswitch-slider::before {
            transform: translateX(1rem);
        }
    }

    .p-inputswitch-slider::before {
        width: 0.9rem;
        height: 0.9rem;
        margin-top: -0.45rem;
    }
  }
}

Code: Select all

<p-inputSwitch class="small-input-switch p-mr-2" (ngModelChange)="onChange($event)" [(ngModel)]="value"></p-inputSwitch>
Or you can do it with ::ng-deep.
Hi

I tried to do as you indicated and it didn't work

My code is:

Code: Select all

<div class="p-col-6">
        <p-inputSwitch class="input-switch-sm" [(ngModel)]="checkedTelefonia"></p-inputSwitch><span class="p-text-bold">Telefonia</span>
</div>
And my css: (inside the file "inputswitch.css")

Code: Select all

.input-switch-sm {

    .p-inputswitch {
      height: 1.2rem;
      width: 2.4rem;
      &.p-inputswitch-checked {
          .p-inputswitch-slider::before {
              transform: translateX(1rem);
          }
      }
  
      .p-inputswitch-slider::before {
          width: 0.9rem;
          height: 0.9rem;
          margin-top: -0.45rem;
      }
    }
}

vimbsoft
Posts: 5
Joined: 04 Jun 2022, 23:03

25 May 2023, 15:58

topedpilot wrote:
13 Oct 2022, 20:24
gbrbd wrote:
08 Aug 2022, 11:30
Hi

This is how we did this:

In global css:

Code: Select all

.small-input-switch {

  .p-inputswitch {
    height: 1.2rem;
    width: 2.4rem;
    &.p-inputswitch-checked {
        .p-inputswitch-slider::before {
            transform: translateX(1rem);
        }
    }

    .p-inputswitch-slider::before {
        width: 0.9rem;
        height: 0.9rem;
        margin-top: -0.45rem;
    }
  }
}

Code: Select all

<p-inputSwitch class="small-input-switch p-mr-2" (ngModelChange)="onChange($event)" [(ngModel)]="value"></p-inputSwitch>
Or you can do it with ::ng-deep.
Hi

I tried to do as you indicated and it didn't work

My code is:

Code: Select all

<div class="p-col-6">
        <p-inputSwitch class="input-switch-sm" [(ngModel)]="checkedTelefonia"></p-inputSwitch><span class="p-text-bold">Telefonia</span>
</div>
And my css: (inside the file "inputswitch.css")

Code: Select all

.input-switch-sm {

    .p-inputswitch {
      height: 1.2rem;
      width: 2.4rem;
      &.p-inputswitch-checked {
          .p-inputswitch-slider::before {
              transform: translateX(1rem);
          }
      }
  
      .p-inputswitch-slider::before {
          width: 0.9rem;
          height: 0.9rem;
          margin-top: -0.45rem;
      }
    }
}
I placed my custom style into the component with

Code: Select all

:host ::ng-deep

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests