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

    Configurable List Widget - Increasing the width of text boxes.

    Asked by karnallc on May 15, 2017 at 10:47 AM

    Hello,

    I am currently in the process of developing a survey and I require a list with rows and columns which allows users to complete different information columns and add rows as required. I have found configurable list to be almost effective. The only issue is that I can not configure the size of the short text entry boxes... I find this strange as this is a very simple modification and is present in the simple short text entry fields but not in the ones included in the configurable list.

    Can somebody provide me the necessary CSS code to be able to configure this? Please also include the code spacing between each column/header.

     

    Picture attached.

     

    Thanks!

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

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 15, 2017 at 11:33 AM

    It is possible to handle the fields width with some CSS code, you will need to first get the field type as well as the column class, this way you only affect all the fields in one column. 

    Once you have the column and field type, you could inject a CSS code similar to this one:

    .col1 input[type="text"] {

        width: 150px;

    }

    This should affect the fields in the first column only, and the code needs to be injected to the widget under the Custom CSS tab: 

    Hope this helps.