How can I add a line break to my configurable list so not all fields are on the same row

How can I add a line break to my configurable list so not all fields are shown in a single row?

Hi Lars,

Thank you for reaching out to Jotform Support. You can set the Configurable List widget layout to vertical using custom CSS. You'll find the custom CSS in this documentation. I'll also paste it here:

@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;

}

}

Kindly take note that you need to insert the custom CSS inside the widget.

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

Thank you for the answer! That's one way to do it, but what I really meant was that I want a horisontal layout but with one line break after the third or fourth text-/date input box. Is that possible?

Hi Lars,

Thanks for getting back to us. Can you provide us a edited sample of what's your goal so we can have a better view and try to come up for a way to achieve it? You can post a screenshot by following this guide. Let me walk you through it:
1. Open the thread in your browser. If you got a reply via email, there should be a button at the bottom that says View this thread. Click that button to open your thread in a new tab.

2. Once you open your thread, scroll down until you see the Your Answer section.
3. This is where you will reply. Click the Add Image button.
4. Next, either paste the image URL or upload the image from your PC. Click the Add button to post the image on your thread.

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

I enclose one screenshot of how it looks now and one example that illustrates how I want the conf. list to appear. You can see the vertical red line in the screenshot, that's where I would like a line break

Hi Lars,

Thanks for getting back to us. Let me check this for you and soon I will get back to you with an update.

Thanks for understanding and patience.

Hi Lars,

Thanks for patiently waiting. You can try to use this code to create a line break:

.configurable-list-field-row, .configurable-list-field-row-wrapper {

  display: contents;

}

You can inject it using this guide. Here's my result:

Please let us know if you have any further requests or if there's anything else we can assist you with.