-
tctrustAsked on December 10, 2016 at 12:55 PM
There is possibility of establishing Predefined Options of Image Radio Buttons?
-
Support_Management Jotform SupportReplied on December 10, 2016 at 4:59 PM
Just to confirm, are you referring to these:
If so, you can change those images. Just change the URL of the images being used for the widget. Just refer to the instructions on the widget itself:
As a quick example, I just used the same images for all 6 options:
And here's how it looked like afterwards:
If you need more guidance, refer to the help description found on the widget itself.
-
tctrustReplied on December 10, 2016 at 5:05 PM
Hello.
NO, I need that the first position is active at the start.
-
liyamReplied on December 10, 2016 at 11:30 PM
Hello,
Unfortunately, it is not possible to have the option selected by default using Image Radio Buttons widget. Let me escalate this matter to the development team and see if this can be added in the widget. However, I cannot guarantee that this can be approved and/or when can this be implemented. But as soon as we have updates, we'll inform you the soonest.
Alternatively, you may consider using Radio buttons from the Form tools for now so that you can add images to the options directly using <img> tag.
Thanks.
-
tctrustReplied on December 11, 2016 at 5:06 AM
OK, but using Radio buttons I have so
There is possibility to approach the design and positioning of the image in Corporation of the button?
-
BorisReplied on December 11, 2016 at 5:56 AM
Yes, we can mimic the appearance of the Image Radio Buttons widget with a regular Radio Button field. All we need to do is inject some custom CSS into your form to customize the appearance.
In order to customize the CSS to only affect this one field you want, we will need to get the ID of the Radio Button field where you use images as options:
https://www.jotform.com/help/146-How-to-find-Field-IDs-Names
On your last edited form, the ID is #id_190, so I would recommend injecting the following custom CSS:
#id_190 .form-radio-item:not(#foo) label::before {
background-color: black;
border: 2px solid #828282;
border-radius: 15px;
width: 26px;
height: 26px;
top: 50%;
left: 50%;
}
#id_190 .form-radio-item:not(#foo) label::after {
background-color: white;
width: 14px;
height: 14px;
top: 50%;
left: 50%;
margin: 6px;
}It will result in a form looking like this:
Please try it out, and let us know should you need further tweaks or assistance.
-
tctrustReplied on December 11, 2016 at 6:56 AM
But now not working conditions 1-8.
I also need to focus with the button texts of values and increase the text of the title.
-
liyamReplied on December 11, 2016 at 7:56 AM
Hello,
How about adding this CSS code into your form (in addition to the code you have inserted above):
#label_190 {
display: none;
}#label_input_190_0, #label_input_190_1, #label_input_190_2, #label_input_190_3, #label_input_190_4, #label_input_190_5, #label_input_190_6, #label_input_190_7{
text-align: center;
padding-left: 25px;
font-weight: bold;
}#label_input_190_0 img, #label_input_190_1 img, #label_input_190_2 img, #label_input_190_3 img, #label_input_190_4 img, #label_input_190_5 img, #label_input_190_6 img, #label_input_190_7 img{
margin-left: -10px;
}If this doesn't work for you please let us know.
Thanks.
-
tctrustReplied on December 11, 2016 at 8:54 AM
Hello,
OK. But now not working conditions 1-8.
-
CharlieReplied on December 11, 2016 at 9:24 AM
Hi,
It seems like you need to edit your conditions. Simply open and select the drop down options that are needed. If you open your conditions, you'll see that the "VALUE" is set to "Please Select" which means it is not properly setup:
Here's a screencast of the issue:
If you made a lot of changes in the radio button field's option list, then that might have caused this problem. Please do open the conditions and make sure that everything is still intact and hit the save button.
Let us know if that works.