Matching default style using configurable list with separate lines

  • Profile Image
    FamilyService_RI
    Asked on November 01, 2021 at 12:19 PM

    We are using the configurable list widget and we are hoping that we can match the style of the fields to the rest of the form. We're also hoping to have each question presented on a separate line, for example:

    • Name
    • Role
    • Phone Number
    • Email

    Image reference: (not from our site)

    1635783457_61801321dec73_

    Would you be able to help provide some assistance?

  • Profile Image
    Girish
    Answered on November 01, 2021 at 02:19 PM

    Please add this CSS code to the custom CSS tab of 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;

    }

    Related guide: https://www.jotform.com/help/428-how-to-inject-css-codes-to-widgets/

    After that add the CSS code below into the CSS section of the form designer: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

    [data-widget-name="Configurable List"]>iframe {

    width:100%!important;

    }

    Please try this and let us know the update.

  • Profile Image
    FamilyService_RI
    Answered on November 02, 2021 at 10:09 AM

    Thank you so much for your help on this. We were successfully able to get all fields on separate lines. However, those fields aren't matching the default style of the form (I've included a screenshot including another field for reference of the default style).

    We'd also like to have the field title to be left-aligned like many of the other questions within the form.

    1635861856_618145605c27f_chrome_2021-11-

  • Profile Image
    Parker
    Answered on November 02, 2021 at 12:11 PM

    Hello,

    Try adding in this to the widget CSS.

    input, select {
      height: 40px;
    font-size: 1em;
    border-radius: 4px;
    border: 1px solid #ccc;
    color: #8894ab;
    padding: 0 .625em;
    }
    label {
    color: #555;
    }
    option {
      color: #ccc !important;
    }
  • Profile Image
    FamilyService_RI
    Answered on November 03, 2021 at 03:15 PM

    This was excellent - are we able to align the question titles to the left of the field or is that something we're prevented from? Truly appreciate the fantastic support!

  • Profile Image
    Parker
    Answered on November 03, 2021 at 04:34 PM

    Hello,

    You can try adding in the following

    .mobileColumnName {
        height40px;
    }

    .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {
    max-width400px;
    float: right;
    }


    These were already included in the CSS so you can add the extra styles on those lines or add them in again.