-
zoiglobalAsked on September 28, 2017 at 5:15 AM
Can you please advise how to force "Other" option to conform to same look as all other options in CheckBox widget (field id input345) in form located at https://form.jotform.us/72702186153150?
Thank you.
Denise
Page URL: https://form.jotform.us/72702186153150 -
Mike_G JotForm SupportReplied on September 28, 2017 at 8:46 AM
We would like to apologize for any inconvenience. I was able to reproduce the issue you are having on a clone version of your form. I noticed that you have changed the field from a "Checkbox" (Multiple Choice Field) to a "Radio Button" (Single Choice Field). The issue, however, can be fixed by injecting custom CSS codes to your form. I will try to work on a solution for your concern and I will get back to you as soon as possible.
-
zoiglobalReplied on September 28, 2017 at 1:37 PM
Any solution to this issue?
Denise
-
Mike_G JotForm SupportReplied on September 28, 2017 at 3:19 PM
I'm sorry if I have caused you any delay. Below are the CSS codes needed to style and position the "Other" option of the radio button field in your form.
.form-checkbox-other, .form-radio-other {
visibility : hidden !important;
}
.form-checkbox-item:not(#foo) input[type="checkbox"],
.form-radio-item:not(#foo) input[type="radio"] {
visibility: hidden !important;
}
.form-radio-item:not(#foo) label:after,
.form-radio-item:not(#foo) label:before {
border-radius: 50% !important;
}
.form-checkbox-item:not(#foo) label:after,
.form-checkbox-item:not(#foo) label:before {
border-radius : 0 !important;
}
.form-radio-item:not(#foo) label:before,
.form-checkbox-item:not(#foo) label:before {
border-width:2px !important;
}
.form-radio-item:not(#foo),
.form-checkbox-item:not(#foo){
margin-bottom: 0 !important;
position: relative !important;
}
.form-radio-other:before {
content: '' !important;
position: absolute !important;
display: inline-block !important;
vertical-align: baseline !important;
margin-right: 4px !important;
-moz-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
border: 0.11em solid #555555 !important;
width: 12px !important;
height: 12px !important;
cursor: pointer !important;
visibility: visible !important;
top: 5px !important;
}
.form-radio-other:after {
content: '' !important;
position: absolute !important;
z-index: 10 !important;
display: inline-block !important;
opacity: 0 !important;
top: 8px !important;
left: 3px !important;
width: 6px !important;
height: 6px !important;
background-color: #555555 !important;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
cursor: pointer !important;
visibility: visible !important;
}
.form-radio-other:checked:after {
opacity: 1 !important;
visibility: visible !important;
}
#other_346 {
min-width: initial !important;
width: initial !important;
}
How-to-Inject-Custom-CSS-Codes
If you have other questions regarding this, please feel free to contact us again anytime.