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

  • MaidCrew
    Asked 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_C
    Replied 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_C
    Replied on April 27, 2017 at 4:59 PM

    I worked on the CSS for your form and I made it like this:

    Image Radio Button Widget Enforce & Center Align 2 Columns Image 1 Screenshot 30

    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:

    Image Radio Button Widget Enforce & Center Align 2 Columns Image 2 Screenshot 41

    And here is my test form so you can check it out: https://form.jotformpro.com/71164743002951

    Let us know your thoughts.

    Thank you!