What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Image Radio Button Widget - Enforce & Center-Align 2 Columns

    Asked by MaidCrew 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

  • Profile Image
    JotForm Support

    Answered by Nik_C on April 27, 2017 at 01: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!

  • Profile Image
    JotForm Support

    Answered by Nik_C on April 27, 2017 at 04: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!