Configurable lists cutting off

Hi - the first two configurable lists on page 2 of this form https://form.jotform.com/90764216136153 are cutting off the "Delete" buttons on the right of the lists. 

I've tried adjusting the CSS in various ways but cannot figure out what is wrong.

Please help!

I have cloned your form and did some minor changes in the CSS code. Well, we need to decrease the width of the column in order to make some space for the delete button. Also, padding must be set according to the availability of the table width.

Please find the below updated CSS code, you can configure the padding space or width as per your requirements:

table {

background-color: #d9f994;

padding-top: 8px;

padding-bottom: 10px;

padding-left: 20px;

padding-right: 400px;

margin-bottom: 10px;

width : 1500px;

}

.col1 > textarea { width: 200px;

font-family: arial;

font-size: 11pt

}

.col2 > textarea { width: 250px;

font-family: arial;

font-size: 11pt;

margin-left: 12px;

}

th.col1 {padding-top: 10px;

font-size: 12pt}

th.col2 {padding-top: 10px;

padding-left: 18px;

font-size: 12pt}

.col3 > textarea { width: 275px;

font-family: arial;

font-size: 11pt;

margin-left: 12px;

margin-right: -33px

}

th.col3 {padding-top: 10px;

padding-left: 18px;

font-size: 12pt}

Below is the screenshot for the same:

Let us know if you face any difficulty in applying the code. We will be more than happy to help you.

Hi - thank you! but i really prefer not to have that much space between the columns. I'd like just a few pixels between each. I am unsure of how to adjust that.

Thanks.

Hello @aboratgi!

I have adjusted the CSS code by adding the following elements (in orange) for the first configurable list as all the other ones seem to have the desired spacing between columns. Please copy and paste the whole thing into the Widget Settings Custom CSS field. 

 

table {

background-color: #d9f994;

padding-top: 8px;

padding-bottom: 10px;

padding-left: 20px;

padding-right: 400px;

margin-bottom: 10px;

width : 1570px;

}

.col1 {

width: 200px !important;

}

.col2 {

width: 200px; !important;

}

.col3 {

width: 200px; !important;

}

.col1 > textarea { width: 200px;

font-family: arial;

font-size: 11pt

}

.col2 > textarea { width: 250px;

font-family: arial;

font-size: 11pt;

margin-left: 12px;

}

th.col1 {padding-top: 10px;

font-size: 12pt}

th.col2 {padding-top: 10px;

padding-left: 15px;

font-size: 12pt}

.col3 > textarea { width: 275px;

font-family: arial;

font-size: 11pt;

margin-left: 12px;

margin-right: 33px

}

th.col3 {padding-top: 10px;

padding-left: 18px;

font-size: 12pt}

Please let us know if you need help with anything else!

Thank you and have a great day!

Thank you, this is perfect!

You are welcome!