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 adjust the widths of textbox fields in the Configurable List widget?

    Asked by guineapigme on December 28, 2014 at 10:07 AM

    How can I make a textbox field wider ... I have very few columns in my list and would like to make them wider



    This is a re-post of a comment on How to Set Up the Configurable List Widget

    textbox wider textbox field Configurable List textboxes text boxes width narrower widen textboxes shrink textboxes contract textboxes
  • Profile Image
    JotForm Support

    Answered by abajan on December 28, 2014 at 11:20 AM

    Thanks for asking. Each field in the widget is contained within its own column and the columns are classed as col1, col2, col3 etc. and textboxes in the widget have a type attribute of text. So, as an example, if there are three (3) textboxes and you want to apply a different width to each of them, you could add the following rules to the Custom CSS section of the widget:

    .col1 [type="text"] {
     width: 200px;
    }

    .col2 [type="text"] {
     width: 150px;
    }

    .col3 [type="text"] {
     width: 70px;
    }

    The above CSS was applied to the Configurable List widget in this demo. It widens the textboxes in the first two columns while it contracts that in the third column. Feel free to clone the demo, change the values in the widget's CSS and observe the results of those changes.

    If you need further help with this, we'd be happy to provide it.

    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on December 28, 2014 at 11:27 AM

    I should add that if you wish all textboxes in the widget to have the same width, the following rule would suffice:

    .col1 [type="text"],
    .col2 [type="text"],
    .col3 [type="text"] {
     width: 200px;
    }

    Thanks