How to separately resize Prefix from First and Last Name?

  • mamoros
    Asked on August 25, 2016 at 9:14 PM

    Hello Support - How can I:

    1.  Separately resize Prefix from First and Last Name so all 3 fields can fit on one line?  This also happens with the Address block of fields.

    2. 

    Calculate age from the Date of Birth date field?


    3. 
    Control the space between fields on the same line AND have fields line up?


    4. 
    Line up vertical spacing for a row of fields?


    5. 
    Have a field expand or shrink to the maximum size of the field?

    Page URL: https://form.jotform.com/62258472884164
  • Chriistian Jotform Support
    Replied on August 25, 2016 at 11:12 PM

    We usually ask our users to post each question in separate threads to avoid confusion and so that we can better assist each query. With that in mind, I have moved some of your questions to their own threads. I will be assisting you with the first question here.

    Separately resize Prefix from First and Last Name so all 3 fields can fit on one line?  This also happens with the Address block of fields.

    You can inject the custom CSS code below to resize the Prefix, First Name and Last Name. You can also modify the highlighted value to change it based on your preference. Please follow this guide to learn How to Inject Custom CSS Codes.

    li[data-type=control_fullname] div span:first-child { /*Adjust width of Prefix*/

        width: 50px;

        margin-right: 10px !important;

    }

    li[data-type="control_fullname"] div span:nth-of-type(2) { /*Adjust width of First Name*/

        width: 30%;

        margin-right: 10px;

     

    }

    li[data-type="control_fullname"] div span:nth-of-type(3) { /*Adjust width of Last Name*/

        width: 30%;

        margin-right: 10px;

     

    }

    May I ask how you would like to resize the Address field block that you mentioned? I will wait for your response.

    You can check out your other questions in their threads by following the links below:

    https://www.jotform.com/answers/916722 

    https://www.jotform.com/answers/916724 

    https://www.jotform.com/answers/916725 

    https://www.jotform.com/answers/916726

    Regards.

  • mamoros
    Replied on August 25, 2016 at 11:45 PM
    Hello Christian - Thank you for your response.
    It seems to me that there should be an option to control the width of
    the fields in the Full Name block without having to go into CSS. I'll
    take a look at it. I may end up creating 4 separate fields for name
    (prefix, first, middle initial, and last).
    For the Address block, I'd like to have about 30 characters for Street
    Address, 20 characters for City, 2 for State (2-character postal
    abbreviation), 5 characters for Zip Code, and 4 characters for Zip+4.
    Thank you for your assistance!
    Melinda
    ...
  • Chriistian Jotform Support
    Replied on August 26, 2016 at 1:22 AM

    Please inject the custom CSS code below to modify the width of the address field.

    .form-address-table {

        width: 100%;

        max-width: fit-content;

    }

    /*Address*/

    .form-address-table td[colspan="2"] .form-sub-label-container {

        width: 256px;

        margin: 0;

    }

    /*City*/

    .form-address-table tr:nth-of-type(3) td span {

        width: 170px;

    }

    .form-address-table tr:nth-of-type(3) td {

        width: 170px;

     

    }

    /*State*/

    .form-address-table tr:nth-of-type(3) td:nth-of-type(2) span {

        width: 28px;

    }

    /*Zip code*/

    .form-address-table tr:nth-of-type(4) td span {

        width: 70px;

    }

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