Configurable lists cutting off

  • Profile Image
    aboratgi
    Asked on March 22, 2019 at 08:17 AM

    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!

  • Profile Image
    gerardw
    Answered on March 22, 2019 at 09:39 AM

    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:

    1553261844cloned form.png

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

  • Profile Image
    aboratgi
    Answered on March 22, 2019 at 10:10 AM

    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.

  • Profile Image
    denis_calin
    Answered on March 22, 2019 at 01:44 PM

    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!

  • Profile Image
    aboratgi
    Answered on March 22, 2019 at 04:06 PM

    Thank you, this is perfect!

  • Profile Image
    denis_calin
    Answered on March 22, 2019 at 06:51 PM

    You are welcome!