How Can I adjust column width with CSS on Configurable Lists?

  • Profile Image
    PJRoker
    Asked on August 15, 2018 at 08:46 AM

    I have a simple row for text inputs, but not all text input cells require the same column width.  Not having the ability to adjust the column widths means I'm limited to the number of columns I can have on my page form.

    I don't want to adjust the page form width simply to accommodate the list width and thought there must be an easy CSS solution to adjust the column widths (as required) within Configurable list.

    Great site - BTW - very impressed with JotForm.

  • Profile Image
    Richie_P
    Answered on August 15, 2018 at 10:34 AM

    May we know what specific configurable list do you want to change the column width?

    The configurable list widget is divided into table with columns and rows.

    Here is a sample chart to properly explain the columns in the Configurable list widget.

    To adjust the width, you can insert this sample custom css code in the widget.

    td.col1 {

    width:100px;

    }

    Hope this information helps.

    Thank you.

  • Profile Image
    PJRoker
    Answered on August 15, 2018 at 12:43 PM
    Thanks for getting back to me so quickly!
    Here’s the table I’m working on:
    I would like to set custom widths for each column as you can see there’s a lot of wasted space (and ideally I’d like to add a few more columns).
    I tried your CSS code as below - but nothing changed to any of the widths. I must be doing something wrong!
    ...
  • Profile Image
    Richie_P
    Answered on August 15, 2018 at 01:10 PM

    Unfortunately, I cannot view the table. You can post a screenshot by following this guide:How-to-include-screenshot-image-in-the-support-forum

    Thank you.

  • Profile Image
    PJRoker
    Answered on August 15, 2018 at 02:34 PM

    Ah - okay.  Sorry.


    Here's the table I'm working on.

    1534357990JotForm.Table.png


    I would like to set custom widths for each column as you can see there’s a lot of wasted space (and ideally I’d like to add a few more columns).
    I tried your CSS code as below - but nothing changed to any of the widths. I must be doing something wrong!

    1534358051Jotform.Configurelist.Code.png

  • Profile Image
    Richie_P
    Answered on August 15, 2018 at 02:57 PM

    Can you please try this updated CSS code.

    td.col1>textarea{
    width:80px;
    }

    Sample screenshot:

    Note that you still have to place the CSS code inside the widget's custom CSS.

    Please give it a try and let us know how it goes.

    Thank you.

  • Profile Image
    PJRoker
    Answered on August 15, 2018 at 04:52 PM

    That worked perfectly and thank you!

    How do I make the same adjustments to the remaining columns (ie. 2, 3, 4 & 5 etc.)

  • Profile Image
    Mike
    Answered on August 15, 2018 at 08:27 PM

    We can use similar CSS.

    Here is an example:

    td.col1>textarea{
    width:80px;
    }
    td.col2>textarea{
    width:80px;
    }
    td.col3>textarea{
    width:80px;
    }
    td.col4>textarea{
    width:80px;
    }
    td.col5>textarea{
    width:80px;
    }

    Thank you.

  • Profile Image
    PJRoker
    Answered on August 16, 2018 at 12:57 AM

    This is perfect!  Thank you.

  • Profile Image
    PJRoker
    Answered on August 16, 2018 at 09:52 AM

    Okay, one last question (promise).


    I've entered additional columns but the spacing between each column changes from column 6 onward.  I would like to keep the same column separation as from one to five so everything fits properly on the form width.


    1534427478Jotform.Aircraft.Fleet.png

  • Profile Image
    Richie_P
    Answered on August 16, 2018 at 11:23 AM

    I have checked your form and it seems the column spacing is corrected.

    Can you please let us know if the issue still remains?

    Thank you.