Configurable List Widget - How to format the columns to rows and keep the width of the labels and text input consistent?

  • Profile Image
    lritter
    Asked on August 22, 2018 at 04:56 PM

    Please see the following screen shot. 

    1534971277screen shot config widget.jpg


    Screenshot
  • Profile Image
    Mike_G
    Answered on August 22, 2018 at 07:10 PM

    The comma you pointed in your screenshot makes the codes not valid. It may look that it fixed the format of the fields in the Configurable List widget, but the codes can really be removed.

    You should get the same correct result if you will delete the codes below.

    .col3 input[type="text"], .col4 input[type="text"], .col5 input[type="text"],{

        display: block;

        width: 15%;

    font-family: arial;

    font-size:14px;

    color: #494949;

    }

    As for fixing the Comment box, please remove the entire CSS codes in the custom CSS tab of the widget and replace it with the codes below.

    /*Format for the Configurable List Widget into rows*/

    #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 0;} 

    #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;font-size: 12pt;} 

    .mobileColumnName + input, 

    .mobileColumnName + textarea, 

    .mobileColumnName + select, 

    .mobileColumnName + .radio-container, 

    .mobileColumnName + .checkbox-container, 

    .mobileColumnName + .dateContainer {width: 50%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} 

    .buttonsColumn {text-align: right;} 

    /*Format for the 'Add a Surface' button*/

    .add, .remove {

    background: #2eb82e !important;

    width: 145px;

    height: 35px;

    font-size: 17px;

    font: Arial !important;

    font-weight: 700;

    text-shadow: none !important;

    color: #ffffff !important;

    cursor: pointer;

    display: block;

    position: relative;

    -webkit-box-shadow: 0 -10px 29px 0 rgba(0, 0, 0, 0.25);

    -moz-box-shadow: 0 -10px 29px 0 rgba(0, 0, 0, 0.25);

        box-shadow: 2px 2px #2eb82e;

        border: 1px solid #fffbea;

        border-radius: 5px;

        transition-property: background-color;

        transition-duration: 1s;

    }

    After that, make the width of the widget 618px from its properties.

    1534979246t19_06_28.png

    Here's a clone version of your form where I have applied the changes above — https://form.jotform.com/82336880023959

    I hope this helps. If you have other questions or concerns, please feel free to let us know.

  • Profile Image
    lritter
    Answered on August 23, 2018 at 09:48 AM

    This is awesome! Even the text looks like the rest of the form (which I didn't mention). Thank you Mike G.!

  • Profile Image
    Mike_G
    Answered on August 23, 2018 at 11:01 AM

    You are most welcome! I'm glad that I was able to help. Feel free to contact us anytime should you have other questions or concerns.