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

    How can I change the width of my configurable list?

    Asked by abuchholz on November 22, 2016 at 09:33 PM

    Hi! Before I asked my question, I have spent sometime looking for previous questions/answers - however, a) it didn't really answer my question b) I still didn't know how to enter the codes (even when I just copied the codes you all provided). 

    I'm hoping you can help me with my specific table. Full disclosure, I honestly, don't know a lot about coding.

    I created a configurable list, however, in my form it runs off. Can you please advise how I can make this look presentable in a form?

    If it's easier, the fields don't have to all be on a single line. Please just let me know how to change that too.

    Thank you,
    Joy

    Page URL:
    https://form.jotform.com/63226289750158

    configurable list configurable how change the width
  • Profile Image
    JotForm Support

    Answered by Chriistian on November 23, 2016 at 02:57 AM

    Hi,

    I am currently checking your form. Please allow me sometime to further check. I will get back soon as I found a custom CSS to provide in the Configurable List Widget.

    Regards

  • Profile Image
    JotForm Support

    Answered by Chriistian on November 23, 2016 at 03:31 AM

    Hi,

    Can you please try to inject this custom CSS below?

    input[type=text] {

        width: 70px  !important;

    }

    select {

    width: 100px  !important;

    padding: 0px  !important;

    margin: 0px  !important;

    }

     

    select.m {

    width: 70px  !important;

    }

     

    select.d {

    width: 40px  !important;

    }

    select.y {

    width: 50px  !important;

    }

     

    li#id_15 {

        padding-left: 30px  !important;

    }

    th {

    font-size: 10px !important;

    font-weight: normal !important;

    }

     

     

    .col8 {

        position: absolute;

        left: 0;

        margin-top: 80px;

    }

    #list tr:nth-child(2) input, #list tr:nth-child(2) > td > select {

        margin-top: 10px !important;

    }

    #list tr input, #list tr > td > select {

        margin-top: 50px !important;

    }

    #list tr:first-child > .col8 {

        display: none;

    }

    #list tr:nth-child(2) > .col8 {

        margin-top: 40px;

    }

    #list tr > .col8:before {

        content: "When did it start";

    }

    .add {

    margin-top: 60px;

    }

     

     To inject custom CSS in the Configurable List Widget please see the screenshot below:

     

    Let us know if this works.
    Regards