Multiple Choice Column width and alignment issues.

  • Profile Image
    GCCResLife
    Asked on April 01, 2019 at 10:44 AM

    I'm trying to align my columns but they don't want to cooperate with me. I want the question to be left aligned and the choices to appear to the right but they keep going underneath. I also want the times to stay on the same line instead of flowing onto the line below. I tried adding some CSS code and it got me part way there but it still won't work on the entire page.

  • Profile Image
    BJoanna
    Answered on April 01, 2019 at 12:37 PM

    Like this?

    1554136121width.PNG

    To achieve this, you will need to reduce the input width of the radio button & check box fields inside of the Advanced Designer from 700px to 500px. 

    1554136263width1.PNG

    You will also have to left align the fields inside of the field Properties. 

    1554136358width3.PNG

    Here is a demo form - https://form.jotform.com/90904974168973

    Feel free to test it and clone it

  • Profile Image
    GCCResLife
    Answered on April 01, 2019 at 01:33 PM

    Ok, this looks great and fixes almost everything. However, I have it set to spread to 4 columns but the last column is overflowing to the next line instead of the empty space to the right.

    Also, the "Back" and "Next" buttons are getting squished together. How do I space them out from one another?


    1554139678Screenshot_1.png

  • Profile Image
    BDAVID
    Answered on April 01, 2019 at 02:38 PM

    Please inject the following CSS code to fix the issues: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-checkbox-item:not(#foo) label {

        width: 100% !important;

    }

    .form-checkbox-item:not(#foo) {

        min-width: auto !important;

    }

    .form-pagebreak-next-container{

        float: right;


    }

    Result:

    1554143841fixed.png

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image
    GCCResLife
    Answered on April 01, 2019 at 02:44 PM

    This worked great. Thanks!