CSS for confiigurable list widget

  • Profile Image
    admconsulting
    Asked on September 7, 2025 at 11:54 AM

    CSS for confiigurable list widget Image 1 Screenshot 20

    I have obtained the presented format using the CSS below from your website.
    @media (min-width: 600px) {

    .configurable-list-field-wrapper {

    min-width: calc(50% - 8px);

    }

    }

    Would it be possible to provide me with CSS so that I can have
    1. the first row with the Units next to Size/Are (maybe a smaller box also because the dropdown is only m2 or ft2
    2. the second row with Type of Room and Room Activity
    3. the third row with the Independent ..... label and radio buttons next each other in one row
    4. the 4th row with If Yes, Equipment Name and Primary Use/Function all in the same row

    Here is the field configuration:
    *Room Name/Number : text

    *Size/Area : text

    *Units: dropdown: m², ft²:Please Select

    *Type of Room: dropdown : Processing, Storage: Please Select

    *Room activity: text: e.g., Packaging

    * Independent Environmental Control Equipment Installed?:radio: Yes, No

    :static: If Yes,

    Equipment Name: text

    Primary Use/Function: text

  • Profile Image
    Ronald JotForm Support
    Replied on September 7, 2025 at 12:25 PM

    Hi info243_info453_info,

    You can easily organize the fields in the Configurable list widget by Injecting CSS Codes into your form. Let me walk you through it:

    1. First, copy this code:

    .configurable-list-field-wrapper.col1.text-field-selector {
      width: 700px !important;
      min-width: 100%;
    }
    .configurable-list-field-wrapper.col4.dropdown-field-selector {
      min-width: 48%;
    }
    .configurable-list-field-wrapper.col6.radio-field-selector {
      min-width: 100% !important;
    }
    .form-single-column.radio-container {
      display: flex;
    }
    label.translatable._j8uzs33yu._uidset {
      margin-left: 10px !important;
    }
    .configurable-list-field-wrapper.col7.static-field-selector {
      min-width: 30% !important;
    }
    .configurable-list-field-wrapper.col8.text-field-selector {
      min-width: 10% !important;
    }
    .configurable-list-field-wrapper.col9.text-field-selector {
      min-width: 30% !important;
    }

    2. In Form Builder, select the Configurable list widget and click the Wand icon.

    3. Under the Custom CSS tab, paste in the code and click the Update button.

    CSS for confiigurable list widget Image 1 Screenshot 30

    See the screenshot below for the results:

    CSS for confiigurable list widget Image 2 Screenshot 41

    Give it a try and let us know how it goes.

  • A
    Alan
    Replied on September 7, 2025 at 1:24 PM

    It worked and it is good enough. It's not exactly how I wanted it but it will work.

Your Reply