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

    Help to make an item in the configurable list to fall in line

    Asked by sujil_highfield on June 08, 2017 at 09:34 PM

    Hello Jotform,  

     

    At this form, https://form.jotform.co/71587038421861 on the second page, the item "Educational Qualification"  in the configurable list is sticking out of the page border. 

    Please help edit to make it fall within the border. 

    Urgent help appreciated. 

     

    Thanks 

  • Profile Image
    JotForm Support

    Answered by liyam on June 08, 2017 at 11:38 PM

    Hello,

    You can replace this CSS injection into your Configurable list widget:

    .checkbox, .radio {
     margin: 3px 0;
     min-width: 70px;
    }

    .d {
     display:none;
    }

    tr {
     display: block;
    }

    td.col5 {
       display: block;
       position: relative;
       top: 20px !important;
    }

    td.col6 {
       display: block;
       position: relative;
       top: -19px !important;
       left: 145px !important;
    }

    th {
       display: none;
    }

    .col1:before, .col2:before, .col3:before, .col4:before, .col5:before, .col5:before, .col6:before{
       font-weight: bold;
    }

    td.col1:before {
      content:"Name";
      display: block;
    }

    td.col2:before {
     content:"Designation";
     display: block;
    }

    td.col3:before {
       content:"Contact Number";
       display: block;
    }

    td.col4:before {
     content:"Gender";
     display: block;
    }

    td.col5:before {
     content:"DOB";
     display: block;
    }

    td.col6:before {
     content:"Qualification";
     display: block;
    }

    Here are the steps to insert this CSS code into your Widget:

    1) Click the Widget Settings button
    2) Go to Custom CSS tab
    3) Paste the CSS code
    4) Click the Update Widget button

    If you have questions, please let us know.

  • Profile Image

    Answered by sujil_highfield on June 09, 2017 at 01:28 AM

    Hi Liyam, 

     

    Thanks for the help.  

    In the same configurable list, the DOB data is only collecting month and year. How to add the date as well? 

     

    Thanks

  • Profile Image

    Answered by sujil_highfield on June 09, 2017 at 01:43 AM
    Hi Liyam,
    Thanks for the help.
    In the same configured list, the DOB data is only collecting month and
    year. How to add date also to it ?
    Thanks
    ...
  • Profile Image
    JotForm Support

    Answered by BJoanna on June 09, 2017 at 03:52 AM

    Remove this part of the CSS code that my colleage provide you.

    .d {

     display:none;

    }

    You will also need to move last field of your configurable list widget a bit more to the left. Change left from 145px to 200px, for this part of the CSS code:

    td.col6 {
       display: block;
       position: relative;
       top: -19px !important;
       left: 145px !important;
    }

    After that you configurable list widget will look like this.

    Here is my demo form: https://form.jotformpro.com/71591396987981 

    Feel free to clone it

    Let us know if you need further assistance. 

  • Profile Image

    Answered by sujil_highfield on June 09, 2017 at 10:43 AM
    Awesome. Made changes in the original form.
    Thanks for taking the time to make a clone.
    Appreciate.
    ...