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

  • Profile Image
    sujil_highfield
    Asked 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
    liyam
    Answered 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
    sujil_highfield
    Answered 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
    sujil_highfield
    Answered 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
    BJoanna
    Answered 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
    sujil_highfield
    Answered 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.
    ...