CSS & Configurable List Widget | How to control column size

  • Profile Image
    derickdavis
    Asked on July 14, 2016 at 08:05 AM

    I'm working with the Configurable List Widget and I have a need for 11 column elements.  Because of this, my widget is wider than the mobile device.  

    How do I use CSS to control the width of various columns?   Many of my columns will only require an entry of 3 characters, but the current format is providing much more "cell" space than 3 columns.  As a result, the overall widget is much "wider" than it really needs to be.

  • Profile Image
    Irshad
    Answered on July 14, 2016 at 09:35 AM

    I am checking it and will send you further updates shortly.

  • Profile Image
    Irshad
    Answered on July 14, 2016 at 10:06 AM

    You can achieve it by writing the custom css code for your specific widget. I am able to see you have already added some custom css code into your "Configurable list Widget". So please add the below css code:

    table {

        width: 50%;

    }

    input[type=text] {

        width: 27px;

    }

    Please check the below screenshot:

     

    You can also verify the design on my Clone form at below URL:

    http://www.jotform.com/61954242271959

    If you face any issue or need further assistance, feel free to revert back.

    Thanks.