How to Change the Layout of the Configurable List Widget

November 22, 2022

The Configurable List widget is responsive by default on all display sizes. It is configured to automatically display the elements on a desktop browser side by side or vertically on mobile devices. Its Custom CSS setting is still present, and you can use it to change its layout. For example, you may want to display the input elements vertically on a desktop or adjust the number of columns.

Below is the list of customizations you can do with the Configurable List Widget.

Vertical Layout

To change the layout of the elements from a column format to a vertical one, you would need to inject the following custom CSS codes.

@media (min-width: 600px) {
#listContainer .configurable-list-field-label {
    min-width: calc(150px - 8px);
}
.configurable-list-field-row {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: flex-start !important;
}
.configurable-list-field-wrapper {
    flex-direction: row !important;
}
#listContainer 
div.configurable-list-field-row-wrapper:not(:first-child) 
span.configurable-list-field-label {
    display: unset !important;
}
}

The custom CSS codes have a desktop-only query to keep its responsive styling on mobile devices. Here’s the result of that:

configurable-list-widget-vertical-layout

Column Layout

You can adjust the layout from fluid to fixed columns — for example, two columns by using the following custom CSS codes.

@media (min-width: 600px) {
.configurable-list-field-wrapper {
   min-width: calc(50% - 8px);
}
}

Adjust the 50% width to create a Three or Four column layout of the elements. Below is an example of a two-column layout:

configurable-list-widget-column-layout

Note:

The above styles conform with the classic default theme. If you notice a problem after applying the custom CSS codes and are hesitant to switch to the default, kindly contact us for assistance.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Sarmad Larik
  • Namrata Chakraborty
  • David Lopez
  • Vania Xavier