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

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 

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.

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

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
...

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. 

Awesome. Made changes in the original form.
Thanks for taking the time to make a clone.
Appreciate.
...