Matching default style using configurable list with separate lines

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)

Would you be able to help provide some assistance?

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.

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.

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;

}

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!

Hello,

You can try adding in the following

.mobileColumnName {

    height: 40px;

}



.mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {

max-width: 400px;

float: right;

}

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