Mirage and inputSwitch displayed as toggleswitch

Post Reply
serenne
Posts: 98
Joined: 21 Jul 2015, 07:43

14 Aug 2022, 11:52

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
Last edited by serenne on 18 Aug 2022, 18:01, edited 2 times in total.

mert.sincan
Posts: 5167
Joined: 29 Jun 2013, 12:38

15 Aug 2022, 00:46

Hi,

It is by design for ToggleSwitch. Maybe, you can create an issue about it on Github.

Best Regards,

serenne
Posts: 98
Joined: 21 Jul 2015, 07:43

18 Aug 2022, 09:07

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 :Image
Kindest regards

mert.sincan
Posts: 5167
Joined: 29 Jun 2013, 12:38

18 Aug 2022, 12:42

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,

serenne
Posts: 98
Joined: 21 Jul 2015, 07:43

18 Aug 2022, 17:48

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

mert.sincan
Posts: 5167
Joined: 29 Jun 2013, 12:38

05 Sep 2022, 11:51

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,

Post Reply

Return to “Mirage - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests