Hello. I want to change the toggle ON to "Is Open" and OFF to "Is Closed", but only the "Is Open" is displaying correctly. When i switch, it appears again "Is Open", but with the other color. How do i fix it?
Hello. I want to change the toggle ON to "Is Open" and OFF to "Is Closed", but only the "Is Open" is displaying correctly. When i switch, it appears again "Is Open", but with the other color. How do i fix it?
Hello Quarenta,
Depending on your choice of labels, you may also have to provide custom CSS to override the default width for the flipswitch:
code
.ui-flipswitch {
width: 5.875em;
}
.ui-flipswitch.ui-flipswitch-active {
padding-left: 4em;
width: 1.875em;
}
@media (min-width: 28em) {
// Repeated from rule .ui-flipswitch above
.ui-field-contain > label + .ui-flipswitch {
width: 1.875em;
}
} /code
More information you may find here: http://api.jquerymobile.com/flipswitch/
Hello. How can i enlarge the switch for the IsOpen and for the IsClosed?
I read the info on the link you've posted, but they also don't explain in detail. I could figure it out on my on, but i'm weak at CSS.
Could you reach out?
Quarenta,
Please try this CSS code, it should help:
code
.ui-flipswitch{
width: 6.875em!important;
}
.ui-flipswitch.ui-flipswitch-active{
width: 2.875em!important;
padding-left: 4em!important;
}
.ui-flipswitch.ui-flipswitch-active .ui-btn.ui-flipswitch-on{
margin-left: 1.1em;
}
.ui-flipswitch .ui-btn.ui-flipswitch-on{
text-indent: -4.5em!important;
}
.ui-flipswitch .ui-flipswitch-off {
text-indent: 0.2em;
}/code
Yes it helped. Thank you very much.