Display the Configurable List as one line vertically

Hello Renaud,

Thank you for contacting Jotfrm Support. There are two ways of injecting CSS. 

• One is on the form style. How-to-Inject-Custom-CSS-Codes 
• The other one is on the widget's CSS itself How-to-Inject-CSS-Codes-to-Widgets

You are probably injecting it on the form where you actually need to inject it inside the widget's CSS.

However, can you explain a bit more about the query so I can get a better idea of what's happening?

Once we hear back from you, we'll be able to help you with this.

Hi,

Thank you for your feedback. For longest time the CSS that was in the widget worked to make a list but all of a sudden it is no longer working! So the CSS is definitely in the right place.

Hi Renaud,

Thank you for getting back to us. Could you give us more information about your concern? It would help us to understand what’s happening if you could take a screenshot and send it to us. We have a guide here explaining how to do that.

We'll be able to move forward once we hear back from you.

Here is a screen shot:

Before the name of school, qualification obtained etc was in list format, now they appear side by side

Hello Renaud,

Thank you for getting back to us. I understand how stressful this is. I believe you are referring to this form. To clarify, would you like to display the list in one line? Can you explain a bit more of your requirement so I can get a better idea of what's happening? We will generate custom CSS codes for you depending on your preference.

Once we hear back from you, we'll be able to move forward with a solution.

Thank you for this. Yes, I would like the list to display on one line for instance:

Name of School:

Qualification obtained:

Completed:

Etc.

Please note that this is just one configurable list, we have several so the code would need to work for all.

Thank you.

Hello Renaud,

Thank you for getting back to us with more details of your requirements on how you'd like the configurable list should display. I’ll need a bit of time to work out a solution. I’ll get back to you as soon as I can. I appreciate your patience.

Hello Renaud,

Thank you for waiting. To display the configurable list widget vertically as one line, we need to inject custom CSS into the widget. Let me walk you through it, step by step:

• Click the wand icon to open the Widget Settings panel.
• Go to the Custom CSS tab.
• Copy and paste the codes below:

@media (min-width: 600px) {

#listContainer .configurable-list-field-label {

    min-width: calc(150px - 8px);

}

.configurable-list-field-row {

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column;

}

.configurable-list-field-wrapper {

    flex-direction: row !important;

}

}

• Click the Update Widget button to save the changes.

Check out the screenshot below to see my results:

Reach out again if there's anything else we can do for you.

Thanks- Worked Great!