Custom CSS for multi-line Configurable List widget.

  • Profile Image
    ohsucme
    Asked on February 21, 2017 at 03:12 PM

    What is the CSS I can use to make the fields in configurable lists on form https://www.jotform.com/build/70105059161850 to appear on multiple lines, like so:

  • Profile Image
    Chriistian
    Answered on February 21, 2017 at 04:52 PM

    Hi,

    I am currently creating the CSS for your form. Please give me some time and I will be back as soon as I have the custom CSS.

  • Profile Image
    Chriistian
    Answered on February 21, 2017 at 05:04 PM

    Please add the following custom CSS to the widget.

    #list td {

        width: 25%;

    }

     

    td.col5 {

        position: absolute;

        top: 60px;

        left: 305px;

        width: 23% !important;

    }

     

    td.col6 {

        position: absolute;

        top: 60px;

        left: 457px;

        width: 23% !important;

    }

     

    #list input, #list select {

        width: 95%;

    }

     

    button.add {

        margin-top: 25px;

    }

     

    Please see instructions below on how to add the CSS.

     

    The result on your end should be as follows.

     

    Let us know if you need further assistance.

    Regards.

     

  • Profile Image
    ohsucme
    Answered on February 22, 2017 at 06:21 PM

    Thank you for your help on this. After I added the CSS a weird message that I can't remove showed up under the widget:

     

    Also, there is a second widget on the page that has a seventh column. I'd like to arrange it like the one above, but have that seventh column be on a third line below the others. Thank you!

  • Profile Image
    jonathan
    Answered on February 23, 2017 at 12:32 AM

    There is a widget that was not used on the form near the bottom location. That was the one showing its configuration dialog.

     

    You can safely delete that widget so that it will not show up on the live form.

    Let us know if this did not resolve the issue.