I am trying to adjust the width of my form to allow the Configurable List display all fields.

  • Profile Image
    sprucesupplychain
    Asked on February 21, 2018 at 03:05 PM

    I am trying to adjust the width of my form to allow the configurable list to fit in it, however it looks fine in the draft but when I go to the preview form I can not see my complete list (a section on the right is hidden). The width is set on 1550. How can I make this work? thanks



    This is a re-post of a comment on How to Set Up the Configurable List Widget

  • Profile Image
    sprucesupplychain
    Answered on February 21, 2018 at 03:38 PM

    I already read that post before I submitted my question, the answer to my question seems to no be there. I know how to adjust the width, it looks good on the draft but when I go to preview it looks wrong, here is the link so you can see what is happening. How can I solve that issue ?


    https://www.jotform.com/build/80425204893153

  • Profile Image
    BDAVID
    Answered on February 21, 2018 at 05:01 PM

    I just loaded your form, and there isn't any hidden section in the Configurable List widget. It appears like you increased the width of your form:

    1519249103width.gif

    Just as as suggestion, your form might feel too wide, you might consider displaying the fields vertically in the Configurable List widget, please check this example: https://form.jotform.com/80516236826963 

    1519250350form.gif

    If you like it, you can inject the following code inside the widget CSS area: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    th {

        display: none;

    }

    td{

        display: block;

        position: relative;

        margin-left: 0px;

        width: 400px;

    }


    td.col1:before {

    content: "Frid #";

    font-weight: bold;

    display: block;

    }

    td.col2:before {

    content: "Number of modules";

    font-weight: bold;

    display: block;

    }

    td.col3:before {

    content: "Type of module";

    font-weight: bold;

    display: block;

    }

    td.col4:before {

    content: "Number of Inverter";

    font-weight: bold;

    display: block;

    }

    td.col5:before {

    content: "Type of inverter";

    font-weight: bold;

    display: block;

    }

    td.col6:before {

    content: "Number of Inverter";

    font-weight: bold;

    display: block;

    }

    td.col7:before {

    content: "Type of inverter";

    font-weight: bold;

    display: block;

    }

    td.col8:before {

    content: "Optimizer";

    font-weight: bold;

    display: block;

    }

    td.col9:before {

    content: "Enphase cable";

    font-weight: bold;

    display: block;

    }

    td.col10:before {

    content: "Monitoring & Other";

    font-weight: bold;

    display: block;

    }

    td.col11:before {

    content: "Batteries";

    font-weight: bold;

    display: block;

    }

    td.col12:before {

    content: "Additional Comments";

    font-weight: bold;

    display: block;

    }

    td{

    margin-top: 10px !important;

    margin-bottom: 10px  !important;

    }

    td.buttonsColumn {

        border-bottom: solid 1px;

        padding-bottom: 10px;

    }


    Let us know if you have more questions.