I could not fit all my items on the configurable list on my page?

  • Profile Image
    lvalenzuela
    Asked on June 22, 2018 at 06:59 PM

    I'm new to this and I'm struggling on how to make everything I want fit on the box. Please help!


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


  • Profile Image
    jonathan
    Answered on June 22, 2018 at 08:02 PM

    You will need to apply the custom CSS injection on your form described on this user guide:

    https://www.jotform.com/help/456-How-to-Make-the-Configurable-List-Widget-Mobile-Responsive

    Example, you can check the output result on my test form https://www.jotform.com/81727328117963

    1529712144zzz 2018-06-23 08.01.40.png


    Let us know if you need further assistance.


  • Profile Image
    jonathan
    Answered on June 22, 2018 at 08:07 PM

    I also recommend you set the Minimal Rows option in your Configurable list to one(1) only for best result.

    Ex:

    1529712277zzz 2018-06-23 08.03.35.png


    In case you are not able to figure it out, the CSS code I added to the configurable list in my test were these:

    #list tbody > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody > tr > td{display:block; padding: 6px 0;} #list tbody > tr + tr + tr {border-top: 1px solid #ccc;} #list tbody tr td:first-child {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

    ---

    1529712380zzz 2018-06-23 08.05.35.png

    ---

    and on the Form Designer CSS these:

    iframe[src*="configurableList"] {width: 100% !important;}

    1529712461zzz 2018-06-23 08.06.40.png