-
MaidCrewAsked on April 27, 2017 at 10:33 AM
Hello again... Is it Possible ....
Is it possible, with injected CSS code, to accomplish the following within a Image Radio Button Widget:
1. Enforce a two column minimum & maximum regardless of available responsive width.
2. Force columns to align from the center within the widget's overall container or available responsive width. (so it centers on smartphone or a web browser window regardless of its scale)
The form (link below) is being test out on: https://themaidcrew.com/sandbox3/
Thanks in advance.
Page URL: https://form.jotform.us/71156554493158 -
Nik_CReplied on April 27, 2017 at 1:09 PM
That should be possible with adjusting the widget to fit the 2 rows and 2 columns rule you want. Regarding the second question, I'm not sure, but please allow me some time to check that and I'll get back to you.
Thank you!
-
Nik_CReplied on April 27, 2017 at 4:59 PM
I worked on the CSS for your form and I made it like this:
I inserted this CSS in the Custom CSS field:
iframe#customFieldFrame_240 {
height: 200px!important;
width: 500px!important;
}
select#input_4 {
width: 350px!important;
}
button#input_237 {
position: relative;
left: -26px;
}
And this CSS in the CSS of the Image widget I inserted:
div#_d2 {
position: relative;
top: 64px!important;
left: -179px!important;
height: 60px!important;
width: 90px!important;
}
div#_a2 {
position: relative;
top: 64px!important;
left: -179px!important;
height: 60px!important;
width: 90px!important;
}
div#_d3 {
position: relative;
top: 64px!important;
left: -210px!important;
height: 60px!important;
width: 90px!important;
}
div#_a3 {
position: relative;
top: 64px!important;
left: -210px!important;
height: 60px!important;
width: 90px!important;
}
div#_d1 {
position: relative;
left:40px!important;
height: 60px!important;
width: 90px!important;
}
div#_a1 {
position: relative;
left: 40px!important;
height: 60px!important;
width: 90px!important;
}
div#_d0 {
position: relative;
left: 71px!important;
height: 60px!important;
width: 90px!important;
}
div#_a0 {
position: relative;
left: 71px!important;
height: 60px!important;
width: 90px!important;
}
I made those fields with that width so it will work on all devices pretty much the same:
And here is my test form so you can check it out: https://form.jotformpro.com/71164743002951
Let us know your thoughts.
Thank you!