-
RFOneVisionAsked on February 8, 2018 at 12:18 AM
I need the radio buttons in the single choice fields (currently blue circles) to match the radio buttons in the Configurable list widget (grey buttons).
Can you give me some code to do that, and where would I insert it since there's no option for CSS in the single choice fields.
Thanks
Page URL: https://form.jotform.co/80361417529861 -
Ardian_LReplied on February 8, 2018 at 5:36 AM
I have tried to change style of radio buttons inside of configurable list widget, but I was not able to do it.
I have then checked with my colleagues and they said that this is not possible. If there is anything else that we can do for you, please let us know.
-
RFOneVisionReplied on February 8, 2018 at 5:52 AM
I actually want to change the style of the list buttons not in the list widget. Is that possible instead?
Thanks
-
Ardian_LReplied on February 8, 2018 at 7:19 AM
I am sorry I misunderstood your question. Yes you can change that with this CSS Code:
.form-radio-item:not(#foo) label:before{
display: none !important;
}
.form-radio-item:not(#foo) label:after{
display: none !important;
}
.form-radio-item:not(#foo) input[type="radio"] {
display: block !important;
float: left !important;
}
Please follow the instructions on the link below on how to inject CSS Code on the form:
https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
Let us know if you have any other question.
-
RFOneVisionReplied on February 8, 2018 at 8:07 AM
That's excellent, but the radio buttons are now too far to the left. Can they be moved closer to their labels?
For example, the 'Accommodation' buttons should come under the 'om' of Accommodation.
Thanks
-
Ardian_LReplied on February 8, 2018 at 9:17 AM
Please add this CSS Code on Custom CSS Area:
.form-radio-item:not(#foo) label {
float: none !important;
}
.form-radio-item:not(#foo) input[type="radio"] {
margin-right: 5px !important;
}
Let us know if you have any other question, we are happy to help you.
-
RFOneVisionReplied on February 8, 2018 at 9:35 AM
Thanks - that's actually moving the text further away from the buttons, whereas I want it closer.
I've changed the code to be 'margin-left: 20px' and it looks a bit better because the buttons are indented, but they are still a bit too separated from their labels.
Any other ideas?
:)
-
RFOneVisionReplied on February 8, 2018 at 9:37 AM
Also, what does the !important mean in so much of these code snippets?
-
RFOneVisionReplied on February 8, 2018 at 9:39 AM
Actually - ignore that. It doesn't look right in the designer, but the result is what I need. Thanks.
Still interested in '!important. :)
-
BJoannaReplied on February 8, 2018 at 11:00 AM
The !important CSS rule is used to override the CSS code that is used for the same element.
For example if you added the same CSS code to the same element twice:
form-radio-item:not(#foo) input[type="radio"] {
margin-right: 500px ;
}
and
form-radio-item:not(#foo) input[type="radio"] {
margin-right: 5px !important;
}
The CSS code with !important rule will override the other CSS code.
You can also check the explanation here:
https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean