Configurable List Widget: Custom CSS for Multi-row Field Layout

Hello,

I’m using the Configurable List widget in Jotform.

I only want to change the layout using CSS.

Here is how I want the existing fields to be displayed:

• Row 1: Type d'entité + Entité
• Row 2: Région + Préfecture + Sous préfecture + Commune
• Row 3: Adresse détaillée
• Row 4: Latitude + Longitude

I need help writing the CSS code to arrange these fields into multiple rows inside the Configurable List widget.

Could you please provide the CSS code to achieve this layout?

Thank you very much for your help!

Hi,

Thanks for reaching out to Jotform Support. Let me help you with that:

To arrange the fields inside the Configurable List widget into multiple rows as you described, you can use the following custom CSS code. This code organizes the fields into four rows according to your layout:

Row 1: Type d'entité + Entité
Row 2: Région + Préfecture + Sous préfecture + Commune
Row 3: Adresse détaillée
Row 4: Latitude + Longitude

Here is an example CSS you can inject into the widget's Custom CSS section:

@media (min-width: 600px) {
/* Make the container flex with column direction */
#listContainer .configurable-list-field-row {
display: flex;
flex-wrap: wrap;
}

/ Row 1: Type d'entité + Entité /

listContainer .configurable-list-field-row span.configurable-list-field-label:nth-child(1), listContainer .configurable-list-field-row span.configurable-list-field-label:nth-child(2) {

flex: 1 1 50%;

}

/ Row 2: Région + Préfecture + Sous préfecture + Commune /

listContainer .configurable-list-field-row span.configurable-list-field-label:nth-child(3), listContainer .configurable-list-field-row span.configurable-list-field-label:nth-child(4), listContainer .configurable-list-field-row span.configurable-list-field-label:nth-child(5), listContainer .configurable-list-field-row span.configurable-list-field-label:nth-child(6) {

flex: 1 1 25%;

}

/ Row 3: Adresse détaillée /

listContainer .configurable-list-field-row span.configurable-list-field-label:nth-child(7) {

flex: 1 1 100%;

}

/ Row 4: Latitude + Longitude /

listContainer .configurable-list-field-row span.configurable-list-field-label:nth-child(8), listContainer .configurable-list-field-row span.configurable-list-field-label:nth-child(9) {

flex: 1 1 50%;

} }

</pre>

Please adjust the nth-child indexes if your field order is different. This CSS assumes the fields are in the order you listed.

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

</pre> ?

Hi Riad,

The </pre> tag you mentioned is an HTML closing tag for a preformatted text block, which is used to display code or text exactly as written, preserving spaces and line breaks.

In the CSS example I provided, the code was wrapped inside <pre> and </pre> tags to format it properly for display. When you add the CSS code to your Configurable List widget's Custom CSS section, you should only copy the CSS code itself without the <pre> or </pre> tags.

So, just copy the CSS part inside the <pre> tags and paste it directly into the Custom CSS area of the widget.

Let me know if you need any further clarification.

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

it doesn't work !

Can I have a human assistant?

?

Hi Riad,

Thanks for reaching out to Jotform Support. I understand that you want to rearrange the fields in your Configurable List widget into multiple rows using CSS. Let me help you with that:

To achieve the layout you described—Row 1: Type d'entité + Entité, Row 2: Région + Préfecture + Sous préfecture + Commune, Row 3: Adresse détaillée, Row 4: Latitude + Longitude—you can use the following CSS code:

1. In Form Builder, open the Configurable List widget settings.
2. Scroll down to the Custom CSS section.
3. Copy and paste the following code into the CSS editor:

@media (min-width: 600px) {

/* Row 1: Type d'entité + Entité */

.configurable-list-field-row-wrapper:nth-child(1) {

display: flex;

flex-wrap: nowrap;

}

.configurable-list-field-row-wrapper:nth-child(1) .configurable-list-field-wrapper {

flex: 1 1 50%;

}

/* Row 2: Région + Préfecture + Sous préfecture + Commune */

.configurable-list-field-row-wrapper:nth-child(2) {

display: flex;

flex-wrap: nowrap;

}

.configurable-list-field-row-wrapper:nth-child(2) .configurable-list-field-wrapper {

flex: 1 1 25%;

}

/* Row 3: Adresse détaillée */

.configurable-list-field-row-wrapper:nth-child(3) {

display: block;

width: 100%;

}

.configurable-list-field-row-wrapper:nth-child(3) .configurable-list-field-wrapper {

width: 100%;

display: block;

}

/* Row 4: Latitude + Longitude */

.configurable-list-field-row-wrapper:nth-child(4) {

display: flex;

flex-wrap: nowrap;

}

.configurable-list-field-row-wrapper:nth-child(4) .configurable-list-field-wrapper {

flex: 1 1 50%;

}

}

1. Click Save to apply the changes.
2. Preview your form to make sure the fields are displayed according to your desired layout.

This CSS ensures that your rows align correctly, with Row 1 and Row 4 splitting fields 50/50, Row 2 splitting fields 25/25/25/25, and Row 3 spanning the full width.

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