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: How to make text box wider

    Asked by mbuchholz on May 25, 2016 at 04:24 PM

    I am looking to figure out how to make a text box on my configurable list widget wider.   Is it possible with CSS or without?  If so what's the best method?

     

    wider configurable list list widget configurable
  • Profile Image
    JotForm Support

    Answered by Boris on May 25, 2016 at 05:53 PM

    Yes, it should be possible with custom CSS. If you need to widen all Text Box fields inside Configurable List, you may want to use the following CSS:

    input[type="text"] {
        width: 135px;
    }

    Where you can adjust 135px into any value you may prefer.

    You can add custom CSS to the widget by clicking its wand-shaped icon, and then switching to its Custom CSS tab:

    If you need specific assistance with widening the form fields, please let us know which of the fields should be widen and how wide they should be, and we will be happy to provide you with the proper CSS code to suit your needs.

    Thank you.

  • Profile Image

    Answered by mbuchholz on May 30, 2016 at 10:44 AM

    I would like to specify all my drop downs to be a minimum width so the form looks cleaner. I attempted to change your code above by changing text to dropdown but that didn't work.   Or even better what is the best way to specify min-width for each type of input.

     

    Thanks

    Mike

  • Profile Image
    JotForm Support

    Answered by Charlie on May 30, 2016 at 12:03 PM

    Try this custom CSS code:

    #list > tbody > tr> td > select {

    min-width: 135px !important;

    }

    You need to paste it directly in your Configurable list widget settings.

     

    If you need to change the specific type, then you'll need to get the type of the input itself.

    Let's say, for drop down fields, I used "select" in the custom CSS code. For text boxes then you can use "input", for textarea fields, then you can use "textarea".

    Let us know if that works.

  • Profile Image

    Answered by mbuchholz on May 30, 2016 at 12:46 PM

    Perfect..  One more.. how about the field using the *Qty:number entry.  

     

    Thanks

    Mike

  • Profile Image
    JotForm Support

    Answered by BJoanna on May 30, 2016 at 01:22 PM

    For number fields add this CSS code inside of Configurable list widget Custom CSS field:

    input[type=number], input[type=text] {

        width: 135px;

    }

    Hope this will help. Let us know if you need further assistance.