-
scanyAsked on December 8, 2017 at 1:05 PM
Is there a way to make the third choice under "Transportation" ("Other") also have a matching pink radio button as the two choices above it?
Page URL: https://form.jotform.com/72544912446156 -
scanyReplied on December 8, 2017 at 1:06 PM
Through the chat window, I was provided with this CSS code, but it had some problems. "Other" did not show as selected, it changed the alignment of the field - especially in mobile view. I removed the code to start over.
.form-checkbox-item:not(#foo) .form-checkbox-other, .form-radio-item:not(#foo) .form-radio-other{ display: none !important; } [data-type="control_checkbox"] span:last-child label, [data-type="control_radio"] span:last-child label{ display: block !important; font-size: 0px; } .form-checkbox-item input[class*="other"], .form-radio-item input[class*="other"]{ margin-left: 40px !important; }
-
Richie JotForm SupportReplied on December 8, 2017 at 1:39 PM
Try using this css code.
span.form-radio-item label{
display:block!important;
}
input#other_37.form-radio-other.form-radio{
display: none!important;
}I hope this helps.
-
scanyReplied on December 8, 2017 at 2:30 PM
It almost works. The circle for "Other" becomes pink, but doesn't show as filled in (the selected radio button) when selected.
-
jonathanReplied on December 8, 2017 at 3:45 PM
I checked/test your form and I still see the issue.
Allow me more time to check and figure out a fix. I'll be back shortly.
-
scanyReplied on December 9, 2017 at 2:19 PM
Just wanted to follow-up to see if there's another suggestion to resolve the formatting question on the "Other" radio button. Thanks!
-
Mike_G JotForm SupportReplied on December 9, 2017 at 4:59 PM
You can try adding the following CSS codes below to your form to change the style of the "Other" radio button 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;
}
.form-radio-item:not(#foo) label:after,
.form-radio-item:not(#foo) label:before {
border-radius: 50%;
}
.form-checkbox-item:not(#foo) label:after,
.form-checkbox-item:not(#foo) label:before {
border-radius : 0;
}
.form-radio-item:not(#foo) label:before,
.form-checkbox-item:not(#foo) label:before {
border-width:2px;
}
.form-radio-item:not(#foo),
.form-checkbox-item:not(#foo){
margin-bottom: 0;
position: relative;
}
/*-------------custom radio--------------*/
.form-radio-other:before {
content: '';
position: absolute;
display: inline-block;
vertical-align: baseline;
margin-right: 4px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid #f4708c;
left: 4px;
width: 18px;
height: 18px;
cursor: pointer;
visibility: visible;
margin-top: -2px;
}
.form-radio-other:after {
content: '';
position: absolute;
z-index: 10;
display: inline-block;
opacity: 0;
top: 5px;
left: 9px;
width: 8px;
height: 8px;
background-color: #f4708c;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
visibility: visible;
}
.form-radio-other:checked:after {
opacity: 1;
visibility: visible;
}
Here's a clone version of your form where I have applied the changes — https://form.jotform.com/73426184637967
Note: The changes may not show in the form builder page but will be visible when you preview the form.
I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.
-
scanyReplied on December 9, 2017 at 6:39 PM
Thanks, Mike! That looks like the fix! Appreciate your help.
-
David JotForm Support ManagerReplied on December 9, 2017 at 9:52 PM
On behalf of my colleague, you are welcome!