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 to reduce width of the Configurable List widget, which gets wider the more fields are being added

    Asked by wasanalabour on July 04, 2016 at 12:37 AM

    the more fields you define, the bigger width of the widget. If you don't want it to be too wide, try to narrow its elements with "Custom CSS" Tab

    How I can do? for adjust fields suitable for page

    Page URL:
    https://form.jotform.me/61810701062443

    elements wide too wide more fields Configurable List custom CSS reduce width
  • Profile Image
    JotForm Support

    Answered by Boris on July 04, 2016 at 03:49 AM

    I believe you are referring to the Configurable List widget, which you are using on the linked form.

    Yes, the more individual fields you add to the Configurable List widget, the more horizontal space this widget will need in order to display all the questions. This is because the widget is intended to have a variable number of rows users can insert/fill out, so it cannot have a huge number of individual fields in each row.

    We can use some custom CSS to narrow down your fields inside the Configurable List widget, or to force its fields display in multiple rows, but the Configurable List widget should preferably not be used with a very large number of individual questions.

    In the Custom CSS of each widget, we will have to set the label for each of the form fields. Here is the custom CSS you can use on your first configurable list widget of your form:

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 70px;
    }

    th { display: none; }
    td {
        float: left;
        margin: 0;
        display: block;
        min-height: 50px;
        box-sizing: border-box;
        padding-right: 2%
    }
    input[type="text"], select, .stepper-wrap input.stepper { width: 100%; }
    span select { width: 30%; }

    td:before { display:block; }
    td.col1:before { content: "กิจกรรม"; }
    td.col2:before { content: "เป้าหมาย"; }
    td.col3:before { content: "ผลลัพธ์"; }
    td.col4:before { content: "พท.(กว้าง) เมตร"; }
    td.col5:before { content: "พท.(ยาว) เมตร"; }
    td.col6:before { content: "พท.(ลึก) เมตร"; }
    td.col7:before { content: "พท.ปริมาณพท.(ตารางเมตร)"; }
    td.col8:before { content: "ระยะทาง(เมตร)"; }
    td.col9:before { content: "ระยะทาง(กิโลเมตร)"; }
    td.col10:before { content: "ระยะทาง (ตารางกิโลเมตร)"; }
    td.col11:before { content: "อำเภอ"; }
    td.col12:before { content: "ตำบล"; }
    td.col13:before { content: "หมู่บ้าน"; }
    td.col14:before { content: "วันดำเนินการ"; }
    td.col15:before { content: "ผู้เข้าร่วมกิจกรรม"; }
    td.col16:before { content: "จำนวนวันทำงาน"; }
    td.col17:before { content: "ประชาชนได้รับประโยชน์"; }
    td.col18:before { content: "งบประมาณที่เบิกจ่าย"; }
    td.col19:before { content: "หน่วยงานที่ดำเนินงาน"; }
    td.col20:before { content: "หมายเหตุ"; }
    td.col1 { width: 33%; }
    td.col2 { width: 33%; }
    td.col3 { width: 33%; }
    td.col4 { width: 33%; clear: left; }
    td.col5 { width: 33%; }
    td.col6 { width: 33%; }
    td.col7 { width: 33%; clear: left; }
    td.col8 { width: 33%; }
    td.col9 { width: 33%; }
    td.col10 { width: 33%; clear: left; }
    td.col11 { width: 33%; }
    td.col12 { width: 33%; }
    td.col13 { width: 33%; clear: left; }
    td.col14 { width: 33%; }
    td.col15 { width: 33%; }
    td.col16 { width: 33%; clear: left; }
    td.col17 { width: 33%; }
    td.col18 { width: 33%; }
    td.col19 { width: 33%; clear: left; }
    td.col20 { width: 33%; }

    Adding it to your first Configurable List widget would make it appear like this:

    To apply the CSS code to your Configurable List widget, simply click on its wand-shaped icon. Once its wizard opens, click on the Custom CSS tab, and paste the code there:

    You can apply the same kind of custom CSS to your other Configurable List widgets, just please make sure to adjust the "content" part of each field with what you want to display as that fields label. This means that for other Configurable List widgets, you will need to adjust the labels marked in red on the above provided CSS.

    Please try it out and let us know should you need any further assistance.

  • Profile Image

    Answered by wasanalabour on July 04, 2016 at 04:45 AM
    thank your very much for your kindness 😍😘😘
    2016-07-04 14:49 GMT+07:00 JotForm :
    ...
  • Profile Image
    JotForm Support

    Answered by Boris on July 04, 2016 at 07:54 AM

    You are most welcome, and if there is anything else we can assist you with regarding your forms, please don't hesitate opening another support thread anytime. We'll be happy to help.