How do I decrease spacing b/t selection on Image Radio Button widget?

  • Profile Image
    jayhobbs21
    Asked on November 25, 2017 at 02:00 AM

    I was able to decrease the widget width and image width, but the SPACING b/t widgets remains large (too large for in to fit on same line with other question, which is my goal). 

    I believe the images are as small as is acceptable.


  • Profile Image
    jayhobbs21
    Answered on November 25, 2017 at 02:23 AM

    Well, I moved a dividing line above it.  That fixed it for some reason.

    Is there a way to make the single image line up (horizontally)with the other images (in the Image Radio Button widget)?

    1511594546okay to delete.png

  • Profile Image
    BJoanna
    Answered on November 25, 2017 at 04:23 AM

    You can add this CSS code to your form to align the single image:

    li#id_48 {

        padding-top: 52px;

    }

    How to Inject Custom CSS Codes

    1511601156image.JPG

    Here is my demo form: https://form.jotform.com/73282207770961 

    Feel free to test it and clone it.

    Let us know if you have any other questions. 

  • Profile Image
    jayhobbs21
    Answered on November 25, 2017 at 09:30 AM

    Perfect...well done.  Thank you.

    btw: Is there a bank of css options that apply to jotform?  I'm sure if I new css well, that would be a ridiculous question, but I am looking to see if there is an in-between step for the rest of us...so we don't have to bother y'all for EVERY change we want to make.

    I don't mind doing it this was, but I didn't want to waste your time if there were another way I was missing.

    Thank you.

  • Profile Image
    BDAVID
    Answered on November 25, 2017 at 10:38 AM

    On behalf of my colleague, you are welcome. We have created a guide that covers some basic CSS customization, you can check it here: https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes 

    But, if what you are trying to accomplish is not listed there, feel free to contact us anytime you want to, we will be glad to assist you.

  • Profile Image
    jayhobbs21
    Answered on November 27, 2017 at 05:45 PM

    It seems some code has perhaps decreased the spacing too much.

    Here is my attempt at a 4-column, "Shrunk" "single-choice" field on a previously-altered document.  I suspect the problem in in some css that I added or changes in the Advanced Editor that I made, but I haven't been able to figure it out.  This one does not separate the choice text from buttons: ( https://form.jotform.com/73254087390156 ).  I would like to know what it is that is messing it up.

    1511821978okay to delete.png

    Here it is on a new document.  This one will not shrink enough for another filed to be on the same line: ( https://form.jotform.com/73305400184143 )

    1511822232okay to delete.png

    I would like the vertical space-saving of the columns, have room for a second element on the same line, and still have it clearly spaced.

  • Profile Image
    BDAVID
    Answered on November 27, 2017 at 07:45 PM

    Not sure which edit you made could have caused this issue, but please try injecting the following code to solve the problem:

    #cid_3,#cid_49{

        min-width: 190px;

    }

    #cid_3.form-radio-item label {

        margin-left: -5px;

        padding-right: 15px;

    }

    #cid_49.form-radio-item label {

        margin-left: -5px;

        padding-right: 15px;

    }


  • Profile Image
    jayhobbs21
    Answered on November 28, 2017 at 01:47 PM

    Does that mean that I will need to add that code for EVERY single choice with columns  that I want to be able to shrink enough to fit another element on the line?

  • Profile Image
    BJoanna
    Answered on November 28, 2017 at 03:16 PM

    If you will be using the same method to position the new fields in the same form, then most likely you will have to add the same CSS code with different field IDs to the form.