How can I separate the two options further apart?

  • glagrow
    Asked on June 12, 2020 at 8:54 AM

    This is what happens when we put the options on one line:

  • Jovanne JotForm Support
    Replied on June 12, 2020 at 9:03 AM

    Hi, thank you for reaching out to us.

    You can insert this custom CSS code to make the two options farther from each other.

    div#cid_5 {

        width: 50% !important;


    }


    Below is the sample output:

    How can I separate the two options further apart? Image 10



    Hope this will help. Let us know if you have any other questions.


    Regards,

    Jovanne

  • glagrow
    Replied on June 12, 2020 at 12:35 PM

    Hello,


    The code works on the first question

    But it does not work on the 2nd

    Does the "5" in the code represent something that needs to be changed? I will be adding more questions in a similar format.  

    Also, why is "50%" in red?

  • Niko_N
    Replied on June 12, 2020 at 2:02 PM

    Greetings,

    "Does the "5" in the code represent something that needs to be changed? I will be adding more questions in a similar format."  

    Yes, that number represents the ID of the field you want to apply those CSS properties. Thus, to apply similar spacing to another fields, you can check its ID by inspecting the page, copy that CSS code and replace that number. For instance, for the 2nd question:

    How can I separate the two options further apart? Image 1 Screenshot 50

    As you can see it's 13 for the field Anyone With Special Needs?, hence I will also inject this code:

    How can I separate the two options further apart? Image 2 Screenshot 61

    So, I will get:

    How can I separate the two options further apart? Image 3 Screenshot 72

    Alternatively, you can also fix that spacing issue without injecting the CSS code as well. You can remove injected CSS and then change Label Alignment to the TOP and they will be automatically placed correctly:

    How can I separate the two options further apart? Image 4 Screenshot 83




    "Also, why is "50%" in red?"

    Custom CSS injector gives different colors to the different element of the CSS code (i.e. class/id selectors, numbers). Thus, those different colors (like red to "50%") are used simply for readability purposes.

    Please check and let us know if you need any further assistance.

    Thank you in advance!