I'm currently struggling to make a toggle switch work on my webpage. Despite trying different approaches such as removing data or not applying it to the input element, the toggle still refuses to function properly. The data-field attribute is supposed to apply the necessary data to the toggle. I've tried everything on the proto.io CSS side without success. Below is the HTML code for the toggle:
<h2 id="workflow-header" class="work-header"></h2>
<div class="onoffswitch" id="workflow">
<input type="checkbox" class="onoffswitch-checkbox" id="email-switch-thing" data-field="subscribeToWorkflowEmail" {{#if checked}}checked{{/if}}>
<label class="onoffswitch-label" for="email-switch-thing">
<div class="onoffswitch-inner" id="activeworkflow-toggle"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
And here's the corresponding CSS:
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #666666; border-radius: 30px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
border-radius: 30px;
box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 15px;
background-color: #6BB2ED; color: #FFFFFF;
border-radius: 30px 0 0 30px;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 15px;
background-color: #FFFFFF; color: #666666;
text-align: right;
border-radius: 0 30px 30px 0;
}
.onoffswitch-switch {
display: block; width: 30px; margin: 0px;
background: #FFFFFF;
border: 2px solid #666666; border-radius: 30px;
position: absolute; top: 0; bottom: 0; right: 56px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
box-shadow: 0 1px 1px white inset;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
Any assistance in resolving this issue would be greatly appreciated!