Label for toggleSwitch

markusg80
Posts: 69
Joined: 21 Nov 2013, 17:11

14 Aug 2018, 08:19

There is new cool toggleinputswitch component. But when i set the label attribute it does not show up as expected. When i add outputlabel with for attribute, it shows text missaligned because the toggleswitch is heigher then the text. now how it is best way to get a label for toggleinput who has vertical aligned label text?

First in Ultima Theme (and maybe other premium layouts) the toggleSwitch is not visible. I already found a sass workaround in this forum to get toggleSwitch visible also with ultima. But color in ultima theme is same in checked and non checked state! for this i had to write another custom scss rule.

Code: Select all

.ui-toggleswitch-checked {
    .ui-toggleswitch-slider {
        background: $primaryColor;
    }
}
PrimeFaces 6.2.14,Mojarra 2.3.0,Payara 5.184

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

14 Aug 2018, 12:35

You could use this css code for toggleInput

Code: Select all

.ui-toggleswitch-slider {
                -webkit-transition: background-color 0.3s, box-shadow 0.2s;
                transition: background-color 0.3s, box-shadow 0.2s;
                background: #cccccc;
            }

            .ui-toggleswitch-slider:before {
                background-color: #ffffff;
            }

            .ui-toggleswitch-focus .ui-toggleswitch-slider {
                -moz-box-shadow: 0px 0px 5px #c0c0c0;
                -webkit-box-shadow: 0px 0px 5px #c0c0c0;
                box-shadow: 0px 0px 5px #c0c0c0;
            }

            .ui-toggleswitch:not(.ui-state-disabled):hover .ui-toggleswitch-slider {
                background-color: #b7b7b7;
            }

            .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
                background-color: #3F51B5;
            }

            .ui-toggleswitch.ui-toggleswitch-checked:not(.ui-state-disabled):hover .ui-toggleswitch-slider {
                background-color: #283593;
            }

markusg80
Posts: 69
Joined: 21 Nov 2013, 17:11

14 Aug 2018, 17:13

Thank you this will solve the problem with the color. But i have another problem with the Label. When i use the Label attribute, the label text is not showing up and when i use outputText with for attribute direct after the
toggleInput, the label is vertical positioned on the buttom and this looks odd because the toggleSwitch is higher than the text. the text should be vertical in center positioned
PrimeFaces 6.2.14,Mojarra 2.3.0,Payara 5.184

aragorn
Posts: 3743
Joined: 29 Jun 2013, 12:38

15 Aug 2018, 08:36

Toggle Switch component doesn't have label option. The label attribute is used for a different aim.(validation message) Maybe, you can use inputSwitch component if you want to show label to users.

Best Regards,

markusg80
Posts: 69
Joined: 21 Nov 2013, 17:11

15 Aug 2018, 08:39

But inputSwitch will be deprecated!
PrimeFaces 6.2.14,Mojarra 2.3.0,Payara 5.184

cagatay.civici
Prime
Posts: 18113
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

28 Aug 2018, 20:38

It is deprecated but in PrimeFaces components never get removed to avoid breaking backward compatibility. The label property is used for validation/conversion messages only as per JSF spec, also material spec switches do not have integrated labels like yes/no.

RueKow
Posts: 331
Joined: 21 Jun 2011, 23:34
Location: Germany - Wiesbaden

02 Oct 2018, 09:28

You can use labels with CSS pseudo element "::after". Maybe you have to play a little bit with positioning of the content.
Image

Code: Select all

.ui-toggleswitch:not(.ui-toggleswitch-checked)::after {
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
	font-size: 0.9em;
	color: #757575;
	content: 'Nein';
	position: absolute;
	left: 26px;
	top: 6px;
}
.ui-toggleswitch.ui-toggleswitch-checked::after {
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
	font-size: 0.9em;
	color: #ffffff;
	content: 'Ja';
	position: absolute;
	left: 12px;
	top: 5px;
}
Rüdiger

PrimeFaces 7.0 | Ultima 2.0
Mojarra 2.3 | Tomcat 8/9 | Win7/10 | OS X 10.14

aragorn
Posts: 3743
Joined: 29 Jun 2013, 12:38

04 Oct 2018, 15:31

Thanks, RueKow ;)

markusg80
Posts: 69
Joined: 21 Nov 2013, 17:11

09 Oct 2018, 21:00

Excellent solution for on and off label, RueKow! But this not solves my problem, because i have other usecase!

I found solution for my problem by myself:

CSS:

Code: Select all

toggleswitch-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.75em;
  }
  .toggleswitch-box.toggleswitch-box-border {
    padding: 5px 5px;
    border-style: solid;
    border-color: #00aae1;
    border-width: 1px;
    border-radius: 50px; 
 }
 .toggleswitch-box.toggleswitch-box-border:hover {
    border-color: #673AB7;
    border-width: 2px; 
  }
And then xhtml:

Code: Select all

<span class="toggleswitch-box">
  <p:outputLabel for="" value="#{intl.holiday}" />
  <p:toggleSwitch id="holidaybox" value="#{cc.attrs.holidayvalue}"  />
 </span>
and with fency border:

Code: Select all

<span class="toggleswitch-box toggleswitch-box-border">
  <p:outputLabel for="" value="#{intl.holiday}" />
  <p:toggleSwitch id="holidaybox" value="#{cc.attrs.holidayvalue}"  />
 </span>
this makes a label on left side and toggleswitch on right side and with the width of the parent tag (div). this solution works well with grid css. And the Label is verticaly centered with the toggleswitch hight ;-)
PrimeFaces 6.2.14,Mojarra 2.3.0,Payara 5.184

aragorn
Posts: 3743
Joined: 29 Jun 2013, 12:38

11 Oct 2018, 09:23

Thanks a lot, markusg80 ;) Could you please attach a sample xhtml page with your css? This can be a nice sample for other users.

Best Regards,

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests