Toggle control randomly does not render properly

Hello,

I noticed an issue with the Toggle control on the public form that it seems to be a bug. Basically, I have a Javascrip that sets the value of a Toggle control on page load and after form submission.

fd.rendered(function() {

// Calling functions on form loading
   
    **fd.field('youParticipatingEVisit').value = 'Yes';**
     
    
     fd.saved(function() {
   setTimeout(function() {
       fd._showAlert('Thank you, your EVisit was scheduled successfully! You may close this page.');
       setAppointmentType();
       **fd.field('youParticipatingEVisit').value = 'Yes';**
   }, 0);
})

});

What I noticed is that on page load it works fine, but after the user submits and start filling out a new form the Toggle control randomly does not render properly. I'm not sure if this due to the Javascript or not, but it made it unstable where I preferred to have it removed and used a radio button instead. I noticed this behaviour in my laptop and iPhone X.

Thanks,

Alberto

Hello @adasilva,

Are you using a desktop designer or Web Designer?

Could you please share the screenshot of the Toggle field when it is not rendered properly, so I could understand the case.

Do you have any custom styling on the form? Could you please share them.

Thank you!

I'm using desktop designer and it does have CSS.

As I removed it from the original form, I will create a test form and replicate the issue.

Once done, I will include it here.

Thank you

Alberto

1 Like

Hi,

As mentioned please see screenshots of Toggle control not rendering properly

.

One thing that I did that seems to have mitigated the issue was to set the default value to "NO" on form load though JavaScript

On the screenshot you will see that some Toggles failed to show the value "No"

Here is the CSS that I'm using:

.fd-form .btn-primary {
color: white;
background-color: #35c2de;
border-color: #35c2de;
}

.k-list .k-item {
font-size: 18px !important;
}

.fd-form .k-dateinput-wrap .k-input, .fd-form .k-dropdown-wrap .k-input, .fd-form .k-combobox-wrap .k-input, .fd-form .k-picker-wrap .k-input, .fd-form .k-multiselect-wrap .k-input, .fd-form .k-numeric-wrap .k-input {
flex: 1 1 0;
font-size: 18px;
}

.k-switch-label-off {
text-align: right;
right: 8px;
font-size: 16px;
}

.k-switch-label-on, .k-switch-label-off {
text-shadow: none;
font-size: 16px;
}

.fd-form .btn-primary {
color: white;
background-color: #35c2de;
border-color: #35c2de;
font-size: 18px;
width: 100px;
}

.fd-form .alert-success .alert-heading {
color: white;
font-size: 18px;
font-weight: bold;
}

.fd-form .alert-body {
color: #373a3c;
font-size: 80%;
overflow: visible;
padding: .75rem 1.25rem;
background-color: #35C2DE;
}

.fd-form .alert-success {
color: #3fb618;
background-color: inherit;
border: 5px;
}

/*
.fd-form .form-control:disabled, .fd-form .form-control[readonly] {
color: aqua !important;*/

}

Hello @adasilva,

I couldn't reproduce exactly the same behavior of the toggle control on my side.

Please try to remove all custom code and styling from the form and check if the issue still exists. If yes, please export the form and share it with me.

Also, I've noticed the mistake in your code. The toggle value is a boolean, so you need to use this code to set its value:

//turn off
fd.field('youParticipatingEVisit').value = false;

//turn on
fd.field('youParticipatingEVisit').value = true;