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. 

Hi Marcus_Amann,

We received an update from our relevant team. Please inject this CSS code below on your configurable list widget:

#listContainer .configurable-list-field-row-wrapper .configurable-list-field-row {

align-items: end !important;

}

This should fix the alignment issue on Safari browser. Check out the steps and screencast below to see how it's done:

1. Open your form in Form Builder, scroll down, and select the Configurable List widget.
2. Click on the Wand icon on the right side of the widget to open Widget Settings.
3. Under the Custom CSS tab, paste the code into the CSS Code box.
4. Finally, click the Update Widget button.

You might also want to check out this guide about How to Inject CSS Codes to Widgets.

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

Works perfectly. Thanks!

Is it possible to display the field names only in the first line and not in the following lines? Like this:

Is it possible to display the field labels only for the first line and not for the following lines? Like this:

And to make the space between the lines just as narrow as here, without a divider?

Hi Marcus_Amann,

You can enable the Single Line feature to display the field names only in the first line. It's very easy to do. Let me show you how:

1. In your Form Builder, click the Configurable List widget and click the wand icon.
2. Under the General tab, scroll down and enable the Single Line feature.
3. Now, click Update widget button.

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

Super. I am always amazed at what is possible with Jotform. Also the competent and fast support.

Is there a way to still display the field labels for each row in the mobile view as opposed to the desktop view? Like here:

And not without the other rows like here:

Hi Marcus,

I checked one of your forms, 241835003258048 which I assumed you were referring to. Here's what it looks like when viewed on desktop and mobile platforms, which is normally what happens when you use a configurable list widget on your form. Check out the screenshot below:

To confirm, do you like it to be more customized? if so can you please explain a bit more on what you are trying to achieve when the form is viewed about mobile devices?

Once we have a better idea of what’s going on, we’ll be able to come up with a solution.

Sorry, the case referred to a different form. However, we can discuss it using the form https://form.jotform.com/241835003258048. I have adapted it accordingly. So that the field names are only displayed once in the first line.

In the mobile version, however, this is misleading, as all fields are below each other and from the second entry onwards without a field label.

Is it possible that in the mobile version, in contrast to the desktop version, every entry appears with field labels?

Have I made it clear what this is about?

Hi Marcus

Thanks for providing more details. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

See https://eu.jotform.com/build/241835003258048

How do I make this configurable list 

look like this

The first two columns very narrow and the third column very wide.

By adjusting the CSS from the list above, I did not manage it.

How can I add an additional descriptive text to a configurable list - or other fields where this is not possible by default - like here?

And/or below the question above the list fields.

Hi Marcus,

After carefully checking, you can use the custom CSS codes below to achieve the style you wan on configurable list:

Replace the current custom CSS in your configurable CSS injector and inject this new codes below:

.configurable-list-field-row {

display: grid !important;

grid-template-columns: 10% 10% 80%;

}

.configurable-list-field-wrapper {

min-width: unset !important;

max-width: none !important;

}

Here's the result:

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

Thanks for the solution.

However, if you click on "Add row", the delete symbol appears above the rows instead of at the end of the rows.

Hi Marcus,

Please replace all the existing CSS codes in your configurable list widget with the new custom CSS code below:

.configurable-list-field-row {

display: grid !important;

grid-template-columns: 10% 10% 70% 5%;

}

.configurable-list-field-wrapper {

min-width: unset !important;

max-width: none !important;

}

Here's the result:

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