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