Spaltenbreite einer konfigurierbaren Liste anpassen

Ich habe in das Formular https://eu.jotform.com/draft/01904b2882b1766698ad03453b6b4b62cf44 diese konfigurierbare Liste eingefügt:

Wie kann ich die Spaltenbreiten, wie in dieser Liste gestalten?

Wenn ich den Namen von "Configurable list" direkt im Formular ändere wird dieser immer wieder auf "Configurable list" zurückgesetzt. Was mache ich hier falsch?

Hi Marcus_Amann,

I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Hi Marcus_Amann,

Our German Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in German, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, I will need more time to work on it. I'll get back to you as soon as I can.

Hi Hi Marcus_Amann,

Thanks for your patience. After looking for a solution I found that your request can be achieved by injecting custom CSS codes into your configurable list. Here's how to do it:

1. In Form Builder, click on Add Form Element.

2. Go to Widgets and choose Configurable List.

3. Click on wand icon, then go to General and delete the other field except for Short Text

4. Then create five Short Text fields and just copy and paste them inside General.

5. Next, copy the custom CSS codes below:

.configurable-list-field-row{

    flex-wrap: nowrap !important;

    max-width: 100%;

}

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

    min-width: unset;

}

.configurable-list-field-row > .col3,.col4{

    flex-grow: 2;

}

6. Go back to the Configurable List widget and click on the wand icon.

7. Then go to Custom CSS and paste the CSS codes into it.

I also changed the title of the Configurable List widget and it works properly on my end. See the screencast below:

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

Thanks for the solution. Works quite well, except for:

If I insert several rows, the third fields are displayed in a raised position. How do I get everything to the same height?

See also https://form.jotform.com/241835003258048

Hi Marcus_Amann,

I cloned your form and tested it to see if I could replicate the issue, but everything was working properly. Check out the screencast below to see my results:

You can also try to remove your form cache to see if this can fix the issue. Although Clearing Your Form Caches isn't done automatically, it's easy to do it manually. Let me show you how:

1. On your My Forms page, hover your mouse over your Profile Image/Avatar icon.

2. In the window that opens, click on Settings.

3. In the Settings menu, scroll down to the bottom and click on Clear Cache. And that's it, you're done.

Can you try it again and see how it goes? If you run into the same issue again, let us know, and we'll do some more testing to see what's going on.

Give it a try and reach out again if you have any other questions.

I have tested it in other browsers. It works in Microsoft Edge and Chrome. In the latest version (17.5) of Safari (Macbook and Mac Mini), the error described occurs.

Try it yourself in the Safari browser.

How can I change the colour of this button?

Hi Marcus_Amann,

I checked your form and it seems you have managed to fix the issue with the alignment. See the screenshot below:

I also cloned your form and it seems to be working fine when I add more row:

And regarding to your question about changing the button color. You can change this by injecting custom CSS codes into your form. Here's how to do it:

1. Copy the custom CSS code below:

#listContainer .add {

    background-color: blue;

}

2. Click the wand icon on Configurable List widget.

3. Then go to Custom CSS and paste the CSS codes into the text field. You can also change the color value depending on the color you need.

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

Have you tested it in the Safari browser? The error still exists there!

Hi Marcus_Amann,

When I cloned and tested your form, the same thing happened for me on Safari browser. We have forwarded this issue to our relevant team. Please give us more time to check on this.

We will get back to you as soon as possible, we appreciate your patience on this.