Adjusting spacing in configurable list

  • Profile Image
    jmcneilcrbc
    Asked on November 23, 2021 at 07:22 PM

    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?

    1637713270_619d8576b84a5_Jotform.png

  • Profile Image
    Tommaso_F
    Answered on November 24, 2021 at 03:51 AM

    Hello there,

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

    Regards.

  • Profile Image
    Tommaso_F
    Answered on November 24, 2021 at 04:25 AM

    Hello there,

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

  • Profile Image
    jmcneilcrbc
    Answered on November 24, 2021 at 01:32 PM

    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.

    1637778655_619e84dfc6fb1_Jotform2.png


    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?


    1637778735_619e852f457d2_Jotform3.png


    Thank you!
    ~Jennifer

  • Profile Image
    Kenneth_C
    Answered on November 24, 2021 at 04:45 PM

    Hi there,

    After customizing the form, here is how it looks:

    1637789878_619eb0b63ee38_e1.jpg

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

    1637790255_619eb22f8a7d3_x1.jpg

    div#cid_22 {

      float: left !important;

      display: contents;

    }

    Let us know if you need further assistance.

    Best.

  • Profile Image
    jmcneilcrbc
    Answered on November 24, 2021 at 08:20 PM

    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

  • Profile Image
    Tommaso_F
    Answered on November 25, 2021 at 02:32 AM

    Hey Jennifer,

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

  • Profile Image
    Kenneth_C
    Answered on November 25, 2021 at 05:19 AM

    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.

  • Profile Image
    jmcneilcrbc
    Answered on November 25, 2021 at 05:22 PM

    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?

    1637878872_61a00c580aff0_Jotform4.png

    1637878903_61a00c77397a7_Jotform5.png

  • Profile Image
    JohnRex
    Answered on November 25, 2021 at 05:42 PM

    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/

  • Profile Image
    jmcneilcrbc
    Answered on November 25, 2021 at 05:51 PM

    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

  • Profile Image
    Jovanne_A
    Answered on November 25, 2021 at 05:59 PM

    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 {
      width38% !important;
    }
    #cid_61,#cid_20,#cid_15,#cid_41 {
      width50% !important;
    }


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

    Thank you.

  • Profile Image
    jmcneilcrbc
    Answered on November 29, 2021 at 06:11 PM

    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

  • Profile Image
    Jovanne_A
    Answered on November 29, 2021 at 07:29 PM

    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.

  • Profile Image
    jmcneilcrbc
    Answered on November 29, 2021 at 07:44 PM

    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!

  • Profile Image
    jmcneilcrbc
    Answered on November 29, 2021 at 08:42 PM

    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:

    1638236564_61a58194cdbd3_Jotform1.jpg

  • Profile Image
    Tommaso_F
    Answered on November 30, 2021 at 02:07 AM

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

    Could you please elaborate more?
    1638256038_61a5cda6da206_

  • Profile Image
    jmcneilcrbc
    Answered on November 30, 2021 at 12:36 PM

    Hi Tommaso,

    You are looking at an old version of the form, please see the live version here.

    1638293569_61a66041b8387_Jotform1.jpg

    Thank you,


    ~Jennifer
  • Profile Image
    Ariel_P
    Answered on November 30, 2021 at 02:41 PM

    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