Configurable List and Dropdown aligned

  • Profile Image
    DFW_ATW
    Asked on August 05, 2022 at 05: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?




  • Profile Image
    Kris
    Answered on August 05, 2022 at 07: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_

    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

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

  • Profile Image
    DFW_ATW
    Answered on August 06, 2022 at 03: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?

  • Profile Image
    CJ
    Answered on August 06, 2022 at 03: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_

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

  • Profile Image
    DFW_ATW
    Answered on August 06, 2022 at 04:30 AM

    Much better! Thank you!