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

  • Profile Image
    eunmitjin
    Asked on September 13, 2019 at 02: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!

  • Profile Image
    aybukeceylan
    Answered on September 13, 2019 at 04: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.5

    Prefix field added form:

    1568361414Screen Shot 2019-09-13 at 10.5

    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.5

    3. Click on Advanced Designer button on Form Designer.

    1568361837Screen Shot 2019-09-13 at 11.0

    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.1

    5. Please make sure you saved the changes.

    6. You can check the field in preview mode.

    1568362500Screen Shot 2019-09-13 at 11.1

    1568372172css-q.gif

    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.