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 do I widen the label width in my configurable list?

    Asked by martinbond on February 28, 2015 at 08:35 AM

    Hi, 

    How do I widen the label on configurable list?

    See attached screenshot 

    label label width configurable list configurable
  • Profile Image

    Answered by Sean on February 28, 2015 at 11:44 AM

    To widen the width of your configurable list labels add the following code to the Custom CSS section of the Configurable list settings.

    th.col1{
    min-width: 200px !important;
    }



    Like I mentioned in your prior thread, target each of the column headers by changing the .col1 to the desired column. Do let us know if you need further assistance.

    Thank you

  • Profile Image

    Answered by Sean on February 28, 2015 at 01:02 PM

    You can give this code a try:

    .form-label .form-label-top{
    width: 300px !important;
    }

    Please let us know the outcome.

  • Profile Image

    Answered by Sean on February 28, 2015 at 02:43 PM

    Sorry that the solution provided earlier did not work. I must say that I am not able to properly test your form due to how complex it is - takes an extremely long time to load in Form Builder. But I managed to do some test using the Inspect Element in through the browser and the below CSS code seem to work just fine.

    .form-label .form-label-top{
    min-width: 500px !important;
    }


    Please follow this guide to inject the CSS code:
    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image

    Answered by martinbond on April 07, 2015 at 09:06 AM

    Hi coming back to the above issue, I'm still experiencing the same issue. Once I select to "Shrink" the table it extends way beyond my desired width even though I have set width to 900.

     

     

    Once I select "expand" the label goes into a few lines as seen below.

     

    Basically I want the width to be around 800 - 900 and the lable to be along the top. 

  • Profile Image
    JotForm Support

    Answered by Welvin on April 07, 2015 at 10:51 AM

    Hi,

    Set the label to top:

    Then inject the following custom CSS codes to your form:

    label#label_1105 {

      width: 800px !important;

    }

    Here's how to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Thank you!