Page 1 of 1
Mirage and inputSwitch displayed as toggleswitch
Posted: 14 Aug 2022, 11:52
by serenne
Hi all,
currently migrating fro PF7 to PF11 and latest Mirage template, I have a problem with inputSwitch that display as toggleSwitch (so : no on/off labels ......).
Is there any issue with this component (still exist in documentation but not in showcase ...)
Kindest regards
Re: Mirage and inputSwitch displayed as toggleswitch
Posted: 15 Aug 2022, 00:46
by mert.sincan
Hi,
It is by design for ToggleSwitch. Maybe, you can create an issue about it on Github.
Best Regards,
Re: Mirage and inputSwitch displayed as toggleswitch
Posted: 18 Aug 2022, 09:07
by serenne
Hi,
Thanks for the answer.
I didn't understand exactly what you mean :
Is it that inputSwitch is displayed exactly as a toogleSwitch (so inputSwitch does not exist any more as a distinct component) ? but it is still documented in documentation ...
Is it a Mirage behavior or a primefaces one (there are no input switch in mirage live demo or in Primefaces showcase) ?
I join a screenshot of differences :
Kindest regards
Re: Mirage and inputSwitch displayed as toggleswitch
Posted: 18 Aug 2022, 12:42
by mert.sincan
Sorry for the confusion! Please try;
Code: Select all
<style>
body .ui-inputswitch .ui-inputswitch-off span, body .ui-inputswitch .ui-inputswitch-on span {
visibility: visible;
}
body .ui-inputswitch .ui-inputswitch-on {
visibility: visible;
color: var(--primary-color-text);
}
body .ui-inputswitch {
height: 28px;
width: 54px !important;
border-radius: 4px;
}
body .ui-inputswitch .ui-inputswitch-handle {
margin-left: 4px;
}
body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-handle {
margin-left: -4px;
}
body .ui-inputswitch .ui-inputswitch-handle {
top: 50%;
margin-top: -10px;
border-radius: 4px;
border: 0 none;
}
body .ui-inputswitch .ui-inputswitch-on, body .ui-inputswitch .ui-inputswitch-off {
top: 2px;
}
</style>
You can override it according to your needs.
Test;
Code: Select all
<p:inputSwitch onLabel="On" offLabel="off" />
Also, please see this issue:
https://github.com/primefaces/primefaces/issues/3906
Best Regards,
Re: Mirage and inputSwitch displayed as toggleswitch
Posted: 18 Aug 2022, 17:48
by serenne
Great ! works fine ... but only with on / off for labels and still this "toggleswitch" displayed. Quite different from the old one l&f
Can we achieve better or should I change all my inptSwitch to another component ?
Kindest regards
Re: Mirage and inputSwitch displayed as toggleswitch
Posted: 05 Sep 2022, 11:51
by mert.sincan
Thanks a lot for the update!
Can we achieve better ...
- Yes, you can override my shared CSS above. Also, I'll try to add it to the next version.
Note: inputSwitch will be deprecated. But, you can use it for a long time.
Best Regards,