Having problem with inconsistent form field. Please help.

  • Profile Image
    Alderton
    Asked on November 01, 2017 at 02:41 AM

    Hi guys... this is driving me crazy. My form looks fairly OK on the form builder (well, the text, email, phone and dropdown fields are all different sizes which I need to get right). At least the text boxes take up the column widths and the headers are left alligned with the fields and labels.

    However.... the fields widths are totally inconsistent when viewed on the live form and not the same as the form builder. 

    I have tried a bunch of things from manually setting field sizes to using the CSS code

    .form-all {

    width:90%;

    }

    The text boxes appear to take on the 90% width... however the phone numbers don't - they are way too small (I have no mask applied) and the email addresses are also too small (but not as small as the phone numbers). 

    If I force the fields to be a certain width in pixels it then does not work on mobile.

    I just want the fields in both columns to be the same width. I want the headers aligned with the fields (neat and tidy) and I want the form to be mobile responsive. Can you please help?

    Cheers
    Jason

  • Profile Image
    Sabbir
    Answered on November 01, 2017 at 04:05 AM

    Sorry for the inconvenience.

    I checked your form and saw that, except the contact number field and the drop down fields, the other fields have consistent width.

    Please put the below CSS code to your Form designer's css tab:

    #input_26_full {
        width: 250px;
    }
    [data-type="control_dropdown"] .form-dropdown {
        max-width: 250px;
        width: 200px;
       
    }

    This will shape the size of the contact field and the drop downs matched with the other boxes width.

    You can check my cloned form here: https://form.jotform.com/73042177457963

    If you have any further query in this regard, please let us know.

  • Profile Image
    Alderton
    Answered on November 01, 2017 at 05:30 AM

    Thanks Sabbir... that seems to have helped.


    Much appreciated :-)