How to reduce the gap after the prefix and get all fields on the same line?

  • eunmitjin
    Asked on September 13, 2019 at 2:23 AM

    There's a really large gap between the "Prefix" and "First Name" portions of this form. I've been trying to reduce the gap and get all three boxes (Prefix, First Name, Last Name) on the same line, but to no avail.

    Is there anyway that this can be rectified? Thanks in advance!

    Jotform Thread 1962894 Screenshot
  • aybukeceylan JotForm UI Developer
    Replied on September 13, 2019 at 4:19 AM

    I've cloned your form(FormID:92492086444463) and tested on my cloned form.

    When I cloned your form, the prefix part on your screenshot is missing. I added prefix as a dropdown menu.

    1568361357Screen Shot 2019 09 13 at 10 Screenshot 10

    Prefix field added form:

    1568361414Screen Shot 2019 09 13 at 10 Screenshot 21

    Please follow the instructions below:

    1. Add the prefix from Full Name properties with click on Options then enable the prefix.

    2. Select Dropdown option.

    1568361573Screen Shot 2019 09 13 at 10 Screenshot 32

    3. Click on Advanced Designer button on Form Designer.

    1568361837Screen Shot 2019 09 13 at 11 Screenshot 43

    4. Please inject the following CSS code to CSS Editor.

    .form-line.jf-required {

        display : table !important;

        width : 100% !important;

    }

    .form-line.jf-required #cid_53 span.form-sub-label-container:first-child {

        width : 16% !important;

    }

    .form-line.jf-required #cid_53 span.form-sub-label-container:last-child {

        padding-right : 0 !important;

    }

    #cid_53 span.form-sub-label-container {

        display : table-cell !important;

        width : 42% !important;

        padding-right : 2%;

    }

    .dropdown-match-height.form-dropdown {

        height : 24px;

    }

    1568362359Screen Shot 2019 09 13 at 11 Screenshot 54

    5. Please make sure you saved the changes.

    6. You can check the field in preview mode.

    1568362500Screen Shot 2019 09 13 at 11 Screenshot 65

    1568372172css q Screenshot 76

    Also, you can check the guide below:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    I hope this will help.

    If you need any further assistance, please let us know.