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

    Css code for configurable list widget

    Asked by swapna_summit on September 01, 2014 at 04:01 AM

    Hi my form is

    http://www.jotform.com//?formID=42431153944956

     

    Here i am using a configurable list widget where the learners details to enter,

     

    I need some space of 10px in between the text boxes and 20px space before the check boxes, also 5px space  in between the check boxes.

    i need the day 1,day 2, day 3 should come as a word in a line with appropriate spaces in between .

    Thanks 

    Screenshot
    css code configurable list JotForm check text boxes www
  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 01, 2014 at 06:38 AM

    Hello swapna_summit,

    Please inject the following custom css code in your configurable list widget to achieve your requirement:

    .col2 input[type="text"] {

    margin-left: 10px !important;

    }

    .col3 input[type="text"] {

    margin-left: 10px !important;

    }

    .col7 input[type="checkbox"] {

    margin-left: 20px !important;

    }

    .col8 input[type="checkbox"] {

    margin-left: 21px !important;

    }

    .col9 input[type="checkbox"] {

    margin-left: 20px !important;

    }

    Please check the screenshot below on how to add custom css in configurable list widget:

    Hope this helps.

    Do get back to us if you have any any questions.

    Thank you!

  • Profile Image

    Answered by swapna_summit on September 01, 2014 at 10:24 AM

    Hi thanks for your reply

    how could add the same space for col 4, col 5, col 6  which are drop down fields

    thanks.

  • Profile Image
    JotForm Support

    Answered by KadeJM on September 01, 2014 at 11:48 AM

    Please allow me a little bit of time to configure this for you and I will provide you with the additional code to format it correctly.

  • Profile Image
    JotForm Support

    Answered by KadeJM on September 01, 2014 at 11:56 AM

    Here's the additional code to replace column's 4,5, and 6 with so that it's formatted with similar spacing for your dropdowns.

    Updated CSS Code:

    .col4 input[type="text"], input[type="button"], select, textarea {

    margin-left: 10px !important;

    }

     

    .col5 input[type="text"], input[type="button"], select, textarea {

    margin-left: 10px !important;

    }

     

    .col6 input[type="text"], input[type="button"], select, textarea {

    margin-left: 10px !important;

    }

     

    Result: