Adjusting spacing in configurable list

Hello,

I have a configurable list in my form. The first column is very tight and there appears to be plenty of room to expand the width of the list. I've tried messing around with the CSS coding but I haven't figured out how to space it out better. Here's a screenshot for reference. Is it possible to adjust the list so it's more evenly spaced out width-wise?

Hello there,

Allow me some time to check and we will be back to you.

Regards.

Hello there,

Could you please adjust padding in the CSS code you already added?

Hi Tommaso,

Thank you for the response but unfortunately this fix adjusted the space between rows, not columns. I've annotated the screenshot to hopefully provide a bit more clarity. As you can see, the spacing between column 1 and column 2 is razor thin.

Also, the space for the configurable lists between the label and the list is very tight. Is there a way to push the list to start on the next line (under the label) or to add more padding?

Thank you!
~Jennifer

Hi there,

After customizing the form, here is how it looks:

If that is acceptable, kindly insert this code into your Configurable List Widget Custom CSS Area:

div#cid_22 {

  float: left !important;

  display: contents;

}

Let us know if you need further assistance.

Best.

Hi Kenneth,

That looks to be the fix I need! Apologies but where should I put the CSS code? I've tried adding to the end of the existing CSS code area for the configurable list but it's not doing anything.

Thank you!

~Jennifer

Hey Jennifer,

Allow me to reach Kenneth in order to check the code.
Meanwhile, change the field label to top

Hi there,

I double-checked, and have applied the mentioned code into your Inject Custom CSS Area instead of the Configurable Lists Widget CSS Area, now it is applied.

Here is how: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/.

Let us know if you need further assistance.

Best.

Thank you so much to you both, Tommaso and Kenneth! One more spacing question now that this is coming together. Is there a way to push the input fields for this spinner, map, file upload, and "additional comments" text area to align with the configurable list input fields?

Please try adding these custom codes below to your form:

#label_61,#label_20,#label_41,#label_15 {

  width: 38%;

}

#cid_61,#cid_20,#cid_15,#cid_41 {

  width: 50%;

}

This will be the result: https://form.jotform.com/213287042660957

GUIDE: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

Hi JohnRex,

I tried adding the CSS code to the Custom CSS section of the form designer but it didn't do anything. Should I be adding it somewhere else?

Thank you!
~Jennifer

Hi,

As per checking you have not added the CSS code to your form. Please try adding them again and clear your form cache to refresh your forms.

GUIDE: how-to-clear-your-form-cache

You may also try adding !important to your code if it still does not work. The code you need to insert will look like this:

#label_61,#label_20,#label_41,#label_15 {

  width: 38% !important;

}

#cid_61,#cid_20,#cid_15,#cid_41 {

  width: 50% !important;

}

Please give it a try and let us know if you need further concerns.

Thank you.

Hi Jovanne_A,

I actually did insert the CSS code and when it did not work, I removed it to avoid confusion. I attempted the additional steps you mentioned, cleared the form cache and added the "!important", but it still did not result in any changes to the form. I have removed the additional code to avoid confusion since it is not currently working and am open to additional suggestions.

Thank you,
~Jennifer

Hi Jennifer,

Could you please try replacing your entire CSS code with this one?

iframe[src*="configurableList"] {

  width : 100% !important;

}



#customFieldFrame_22 {

  width : 100% !important;

}



#customFieldFrame_33 {

  width : 400px !important;

}



#customFieldFrame_34 {

  width : 400px !important;

}



#customFieldFrame_37 {

  width : 400px !important;

}



.form-all:before {

  background-size : contain;

}

div#cid_22 {

  display: contents !important;

}

.form-label.form-label-auto {

     

    display: inline-block;

    float: left;

    text-align: left;

    

   }

label#label_61,#label_20,label#label_41,label#label_15 {

  width: 38%;

}

div#cid_61,div#cid_20,div#cid_15,#cid_41 {

  width: 50%;

}

Please note that some of this CSS code will only work on the live form. Please give it a try and let us know how it goes.

Hi Jovanne_A,

Thank you so much, that did the trick! I always check the updates on the live form, not just the preview, so I'm not sure what caused the disconnect. The form looks exactly how I want it to now though, so thank you!

Hmm, I just noticed one of the lines doesn't line up with everything else. Is there a way to adjust it? Here's a screenshot for reference:

Hello there,
We're unable to find any issue with recent code suggested.

Could you please elaborate more?

Hi Tommaso,

Hi Jennifer,

I have moved your other concern to a new support ticket so that we can address it separately: https://www.jotform.com/answers/3553785