How to increase fields size and keep the display inline property?

  • Profile Image
    rugbynorcal
    Asked on May 24, 2017 at 04:59 PM

    When changing some spacing and sizing of fields, some of the fields on my form entered to the next line. Example: Contact Name used to be First and Last name fields on the same line, now they are on top/bottom of each other. And the label on some of the text fields is now on two lines. How can I change this?

  • Profile Image
    Kevin_G
    Answered on May 24, 2017 at 06:22 PM

    Do note that you cannot display the full name sub fields with their width as 100% since they will be displayed one below the other, this since both fields are displayed inline, you will need to set up width value without exceeding the max value the fields can have. 

    I can see your fields are not currently displaying on the entire form, I would suggest you to inject the following code: 

    [data-type="control_textbox"] .form-input, [data-type="control_textarea"] .form-input, [data-type="control_fullname"] .form-input, [data-type="control_phone"] .form-input, [data-type="control_datetime"] .form-input, [data-type="control_address"] .form-input, [data-type="control_email"] .form-input, [data-type="control_passwordbox"] .form-input, [data-type="control_autocomp"] .form-input, [data-type="control_textbox"] .form-input-wide, [data-type="control_textarea"] .form-input-wide, [data-type="control_fullname"] .form-input-wide, [data-type="control_phone"] .form-input-wide, [data-type="control_datetime"] .form-input-wide, [data-type="control_address"] .form-input-wide, [data-type="control_email"] .form-input-wide, [data-type="control_passwordbox"] .form-input-wide, [data-type="control_autocomp"] .form-input-wide{

      max-width: initial;

    }

    .form-textbox, .form-textarea{

      max-width: initial;

    }

    .form-input, .form-address-table, .form-matrix-table{

      max-width: initial;

    }

    This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    You could also see the result on this cloned form of yours: https://form.jotformpro.com/71437322641956 

    Hope this helps.