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>
beks
Code: Select all
<p-inputSwitch [(ngModel)]="createUserAccount" [style]="{'width':'4rem;', 'height':'2.3rem;'}"></p-inputSwitch>
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>
Higbrbd wrote: ↑08 Aug 2022, 11:30Hi
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; } } }
Or you can do it with ::ng-deep.Code: Select all
<p-inputSwitch class="small-input-switch p-mr-2" (ngModelChange)="onChange($event)" [(ngModel)]="value"></p-inputSwitch>
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>
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 withtopedpilot wrote: ↑13 Oct 2022, 20:24Higbrbd wrote: ↑08 Aug 2022, 11:30Hi
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; } } }
Or you can do it with ::ng-deep.Code: Select all
<p-inputSwitch class="small-input-switch p-mr-2" (ngModelChange)="onChange($event)" [(ngModel)]="value"></p-inputSwitch>
I tried to do as you indicated and it didn't work
My code is:
And my css: (inside the file "inputswitch.css")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>
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; } } }
Code: Select all
:host ::ng-deep
Users browsing this forum: No registered users and 8 guests