Page 1 of 2
Label for toggleSwitch
Posted: 14 Aug 2018, 08:19
by markusg80
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;
}
}
Re: Label for toggleSwitch
Posted: 14 Aug 2018, 12:35
by huseyinT
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;
}
Re: Label for toggleSwitch
Posted: 14 Aug 2018, 17:13
by markusg80
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
Re: Label for toggleSwitch
Posted: 15 Aug 2018, 08:36
by mert.sincan
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,
Re: Label for toggleSwitch
Posted: 15 Aug 2018, 08:39
by markusg80
But inputSwitch will be deprecated!
Re: Label for toggleSwitch
Posted: 28 Aug 2018, 20:38
by cagatay.civici
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.
Re: Label for toggleSwitch
Posted: 02 Oct 2018, 09:28
by RueKow
You can use labels with CSS pseudo element "::after". Maybe you have to play a little bit with positioning of the content.
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;
}
Re: Label for toggleSwitch
Posted: 04 Oct 2018, 15:31
by mert.sincan
Thanks, RueKow
Re: Label for toggleSwitch
Posted: 09 Oct 2018, 21:00
by markusg80
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
Re: Label for toggleSwitch
Posted: 11 Oct 2018, 09:23
by mert.sincan
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,