How to align prefix, first, middle, and last name in a single row

  • Gayav
    Asked on September 1, 2016 at 9:22 AM
    #2.Please email me the css code to align prefix,First,Middle ,Last name need to be aligned in a single row,If you can reduce the prefix text box size smaller is fine.
  • Boris
    Replied on September 1, 2016 at 9:35 AM

    The reason that the individual fields from your Full Name field are displaying in two rows is due to existing CSS from the design of your form. In order to counter it, we would need to utilize the following CSS:

    #cid_12 { max-width: none; }
    #cid_12 > .form-sub-label-container { width: 24%; margin-right: 1%; }

    You can add the above CSS codes either by opening up the Designer, or by following this guide:

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

    You would also need to remove this part of your existing custom CSS:

    [data-type="control_fullname"] .form-sub-label-container:first-child {
        margin-right : 0 !important;
    }

    Making these changes would cause your full name field appear like this:

    How to align prefix, first, middle, and last name in a single row Image 1 Screenshot 20