Put all checkbox items on one line

  • mckbosart
    Asked on October 26, 2016 at 7:58 PM

    Hey guys!

    I have created a form where I am using a checkbox with 3 options and then the "other" text box as the 4th item. Can you please help me get this all on one line? I will have my techs select Satisfactory/unsat/N/A and then I need a spot for the notes.. but I cannot figure out the CSS to format it all on one line. I will be duplicating the item about 25 times for different check items.

     

    Thank you! 

  • Charlie
    Replied on October 27, 2016 at 1:56 AM

    The width of the check box field tries to match the width of your form, so if the width of the form is smaller, then the check box will adjust:

    Put all checkbox items on one line Image 1 Screenshot 50

     

    Here's how you can fix that:

    1. First, make sure to move the field "Engine Running Checks" on a new line, I presume it should not be on the same line of the "Enclosure Air Inlets and Outlets":

    Put all checkbox items on one line Image 2 Screenshot 61

     

    2. You will then need to increase the width of the form itself, you can find that setting in the Form Designer Tool:

    Put all checkbox items on one line Image 3 Screenshot 72

     

    3. After that, paste this custom CSS code in your Form Designer Tool's CSS tab:

    #cid_37 > div > span:nth-child(4) {

        clear: none !important;

    }

    Put all checkbox items on one line Image 4 Screenshot 83

     

    If you are setting up multiple of these fields, perhaps using the Configurable List widget might be more appropriate? Here's a guide that you can refer to: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget 

    Let us know if that works.