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

    Columns in Purchase will not spread out properly

    Asked by dclempa on April 28, 2013 at 04:05 AM

    In my purchase order the columns are set to 8 but will only go to 5 and they are not distributed correctly.

    This is located on first page under "Sheets of P-1283", the alphabet is messed up. I need as many column as

    possible accross width to cut down on lenght of form.

    Page URL:
    http://form.jotform.us/form/31070890432145

    purchase
  • Profile Image
    JotForm Support

    Answered by EltonCris on April 28, 2013 at 06:30 AM

    Hi,

    That's because your form width is not so wide for the columns to spread out. You may add this to your form's injected CSS codes instead to achieved that.

    #id_29 .form-multiple-column .form-checkbox-item {

    width: 96px;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Result:

    Thank you!

  • Profile Image

    Answered by dclempa on May 06, 2013 at 09:19 PM
    http://form.jotform.us/form/30987304352152 AND http://form.jotform.us/form/31070890432145
    Where did you come up with those id’s? I read the email below and I know how to insert CSS but that where does that #id_29 come
    from. There is not an id like that on the form that he showed me how to fix below. That form below has something like maybe
    #input_9_1001. I am trying to make the columns fit the page like below but on the http://form.jotform.us/form/30987304352152 form.
    Thanks Dennis
  • Profile Image

    Answered by dclempa on May 06, 2013 at 09:47 PM
    This came back so I sent it again..Thanks Dennis

  • Profile Image
    JotForm Support

    Answered by Welvin on May 06, 2013 at 11:43 PM

    It's id_9, so;

    #id_9 .form-multiple-column .form-checkbox-item {

    width: 96px;

    }

     

    Thanks

  • Profile Image

    Answered by dclempa on May 06, 2013 at 11:54 PM
    Welvin

    I put the code in and it is not working. Please Help!

    Thanks Dennis

  • Profile Image
    JotForm Support

    Answered by Welvin on May 07, 2013 at 12:09 AM

    I'm sorry. I am bit lost here :)

    You want to put into two rows - the product quantity property? If yes, you do not need to inject custom CSS codes. You just need to expand the product listing as it is currently shrink down.

    I've fix that, please kindly check.

     

    Thanks

  • Profile Image

    Answered by dclempa on May 07, 2013 at 12:29 AM
    Welvin

    How do I do that so I will know in the future. Is there anyway to line up the letter “S”? It is not aligned. It is sticking out to the right
    too much.

    Dennis

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 07, 2013 at 03:20 AM

    Hi Dennis,

    Inject this on this form. http://form.jotform.us/form/31070890432145

    .form-sub-label-container:nth-child(30) {

    margin-left: 62px;

    }

    .form-product-item .form-sub-label-container {

    width: 50px;

    }

    Result: 

    ------

    For the other form http://form.jotform.us/form/30987304352152, use the following codes.

    .form-sub-label-container:nth-child(20), .form-sub-label-container:nth-child(27) {

    margin-left: 62px !important;

    }

    .form-product-item:nth-child(21) .form-sub-label-container:nth-child(12){

    margin-left: 62px !important;

    }

    .form-product-item:nth-child(21) .form-sub-label-container{

    width: 90px !important;

    }

    .form-product-item .form-sub-label-container {

    width: 78px;

    }

     

    Result:

    It's quite difficult than what I've expected but it's doable with CSS :). Note that any additional quantity options or products may lead this css not to work. Here are some infos about using nth child. https://developer.mozilla.org/en-US/docs/CSS/:nth-child

    If you want further changes, feel free to contact us here anytime. Thank you!

  • Profile Image

    Answered by dclempa on May 07, 2013 at 03:24 AM
    Thanks, you guys are super!!

  • Profile Image

    Answered by dclempa on May 07, 2013 at 03:33 AM
    Wrong form. The form I am working on is http://form.jotform.us/form/30987304352152. I used the code you gave me there and it does
    not work as below. Thanks Dennis

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 07, 2013 at 03:49 AM

    @dclempa

    I've actually provided two different set of CSS codes for the two different forms. Kindly review. You should probably use the 2nd set of codes. Thanks! =)