-
cformationAsked on November 15, 2017 at 7:52 PM
Is there any way to make the radio buttons line up horizontally rather than vertically?
-
candyReplied on November 16, 2017 at 2:45 AM
It is possible to make the radio buttons line up horizontally rather than vertically in a configurable list widget by injecting additional CSS codes. Please check the following guide to see how to inject CSS codes to the widgets: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets
I have cloned your form named "Rite of Election 2018" on my side as an example. I've added 2 more radio button options to the configurable list widget and I have seen that they aligned vertically as seen below:
I've injected following CSS codes in order to make them align horizontally as you can see in the following screenshot below:
iframe#customFieldFrame_3 {
width: 583px !important;
}
.radio-container {
display: -webkit-box !important;
}
Please see that, I have to delete some fields in order to make the radio buttons suit its container.
Moreover, there is also a second way. You can also check and clone the following test form on your side in order to investigate it: https://form.jotform.com/73191248323959
Please find the CSS codes below in order to align radio buttons horizontally as you can see in the following screenshot below:
.checkbox, .radio {
margin: 3px 0;
min-width: 70px;
}
#list {
width: 100%;
}
.radio-container {
width: 100%;
display: table;
}
.radio {
display: table-cell;
width: 1%;
}
I hope this explanation helps.
Please try and let us know if you need any further assistance.