Configurable List and Dropdown aligned

  • DFW_ATW
    Asked on August 5, 2022 at 5:59 PM

    I created a bulk registration form for my sponsors to register their complimentary guests to our event. They need to specify if the guest gets a general admission ticket or a VIP ticket. I've added the drop down field for the ticket type, but it is not appearing on the same line where the individual name appears. I've shortened the fields, but the ticket type field still isn't appearing next to the individual name -- see link to form below. Should I be using an input table instead of the separate fields I currently set up?

    I want the sponsors to be able to edit their submissions to add names at a later date if needed. If I switch to an input table, will they still be able to make edits?




  • Kris JotForm Support
    Replied on August 5, 2022 at 7:27 PM

    Hello DFW_ATW,

    Thanks for reaching Jotform. We’re sorry you’re having trouble with this form. As you will notice on the screenshot below, the Configurable list and the Dropdown will not be aligned because of the text you added on the Configurable list that covers the space where you want to put the Dropdown field:

    1659741535 62eda55f2e541  Screenshot 10

    But there might be a workaround here and that is by adding a Paragraph field. Please see the screencast below:

    1659742025 62eda749c054a 2022 08 06 07 1 Screenshot 21

    Give it a try and let us know if you have any other questions

  • DFW_ATW
    Replied on August 6, 2022 at 3:34 AM

    That worked. Thank you!

    Now that the instructions are in a separate paragraph field, though, can the amount of white space be decreased between the instructions and the field labels for Email/First Name/Last Name/Ticket Type?

  • CJ_G
    Replied on August 6, 2022 at 3:47 AM

    Hello DFW_ATW,

    Thanks for your response. Please inject the CSS code below into your form to decrease the white space between the Configurable List widget label names and the Paragraph field:

    #id_123{
     margin-top: -20px !important;
    }
    #text_129 > p:nth-child(2){
     margin-bottom: 0px !important;
    }


    Result:

    1659772018 62ee1c72d4ca6  Screenshot 10

    Give it a try and let us know if you need any help.

  • DFW_ATW
    Replied on August 6, 2022 at 4:30 AM

    Much better! Thank you!