Multiple Configurable List widget: Alignment of the other configurable widgets gets broken when you add a row to one of them

Hi there,

I'm wondering if there is a way to align a configurable list to the top of the page such that when I add a new row, the alignment always stays the same. For example, I have these configurable lists with "shrink" = on....

and scrolling down.... you see the "+ Add Row" button for each list.

However, if I do click "+ Add Row" for one of the configurable lists (columns), but not the others, the "others" end up bumping down in the middle of the page. How do I keep them aligned at the top?

Hi abwildlifecameras,

Thanks for reaching out to JotForm Support. I'm sorry you're having trouble with your Configurable List widget. I cloned your form and was able to replicate the issue.

I tried injecting some CSS Codes but it seems the fields position can only be fixed from the backend. I created a ticket and escalated this to our Developer team. Although we don't know exactly when the issue will be fixed, we’ll circle back to this thread when we have an update.

Thanks for your patience and understanding, we appreciate it.

Hi abwildlifecameras,

Thanks for your patience and understanding while we are looking into this. We've just heard back from our developer team. To fix the current view issue; you'll need to inject the CSS code below to your form (not the widget but form) to eliminate bump downs. Let me show you how you can inject the CSS code to your form:

1. On Form Builder, click on the Blue Paint Roller icon and Choose Advanced Designer.
2. Once the page is loaded, click on the CSS tab and paste the code below.
3. After injecting the code, click on the Save button and circle back to Form Builder.

The CSS code:

.form-line[data-type=control_widget]:has(iframe[data-client-id="533946093c1ad0c45d000070"]) {

align-self: flex-start;

}

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

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