What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Spreading 5 checkbox options across 1 row

    Asked by wrstaff on November 17, 2015 at 12:16 PM

    I want to have my 5 options displayed on 1 row.

    I inserted the following custom CSS code *

    span.form-checkbox-item[style="clear:left"]{ clear: none !important;} * from this help thread (http://www.jotform.com/answers/419353-Spread-columns-allow-other-field), but that didn't work.  Spread to columns is set to 5 with no effect.  Ideas?

     

     

    Page URL:
    http://www.jotform.com//?formID=53177889165976

  • Profile Image

    Answered by KadeJM on November 17, 2015 at 03:35 PM

    From what I gather I see that you want to spread 5 of your checkbox options yet keep them on the same row if that is correct?

    If the css code you have most likely isn't working then that probably means your field is probably set up slightly different which would the reason as to why.

    To help you correct the issue can you please confirm or correct me if it is the "Desired Packages Field" which you are trying to fix? 

  • Profile Image

    Answered by wrstaff on November 17, 2015 at 04:08 PM

    Yes, you are correct on both counts.  Did my screenshot when I submitted the question not appear?  I'd like to know to help with future questions.  I've been using the Snipping Tool for screenshots instead of uploading an image.  Should I upload instead?

  • Profile Image

    Answered by KadeJM on November 17, 2015 at 04:22 PM

    Unfortunately no your screenshot didn't appear and thank you for confirming. 

    I've been fiddling around with it anyway to help find a feasible correction for you and I believe I found a fix for you to try out.

    Leave that last line you added but go back into the css editor and add in the new css line which I've provided you below.

     

    Inject this Additional New Line of CSS at the End:

    #cid_306 span.form-checkbox-item {

        margin-right: -30px;

    }

     

    And that should give you this as a Result: 

  • Profile Image

    Answered by wrstaff on November 17, 2015 at 07:24 PM

    The two CSS combined work beautifully.  While editing the form, it still appears incorrect but the 5 options are on 1 row when viewing the form within preview or within a browser.  Thank you!

     

    CSS Code:

    span.form-checkbox-item[style="clear:left"]{ clear: none !important;}

    #cid_306 span.form-checkbox-item {

        margin-right: -30px;

    }

  • Profile Image
    JotForm Support

    Answered by jonathan on November 18, 2015 at 12:53 AM

    Thank you for updating us.

    I checked the form http://www.jotform.com/53177889165976 also on my browser, and I can see it working as intended as well.

    Feel free to contact us again anytime for any assistance you need on JotForm