How do I widen the label width in my configurable list?

  • Profile Image
    martinbond
    Asked on February 28, 2015 at 08:35 AM

    Hi, 

    How do I widen the label on configurable list?

    See attached screenshot 

  • Profile Image
    Sean
    Answered 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
    Sean
    Answered 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
    Sean
    Answered 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
    martinbond
    Answered 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
    Welvin
    Answered 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!