Editing the size of text boxes in Configurable List Widget

  • Profile Image
    Millarhouse
    Asked on November 10, 2021 at 10:55 AM

    This is the form that I'm using the widget for: https://form.jotform.com/213134109928151


    I would like to adjust the size of the individual text boxes to eliminate the need to side scroll. Can you help with a solution for this?

    Thank you!

    1636559704_618beb58c7135_

  • Profile Image
    Richie
    Answered on November 10, 2021 at 12:43 PM

    It is possible to set the configurable list fields to vertical to show all the fields without scrolling.

    firefox_41seYTtTF7.png

    You can add this CSS code inside the configurable list widget.

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

    firefox_xdXewqc24h.png

    Please give it a try and let us know if this fits your requirements.