Field and Sub Label Size

  • NACWPI
    Asked on January 24, 2017 at 10:48 PM

    I'm having difficulty adjusting the size of the entry field on my forms so that they are uniform. Though they all seem to be set to 60px, they are actually different sizes on the published forms.

    Also, the text in one Sub Label carries across the frame so that it is not visible on the published form.

     

    Page URL: https://nacwpi.wildapricot.org/Performance-Proposal
  • Charlie
    Replied on January 25, 2017 at 12:53 AM

    Hi,

    You can use the Form Designer Tool to adjust the width of your form fields. Here's a guide about it: https://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms- 

    For the sub labels crossing the form frame, you can add this custom CSS code to your form:

    label.form-sub-label {

        white-space: normal !important;

    }

    That should wrap the sub label properly. Below is a screenshot to where you can paste the custom CSS code: 

    Field and Sub Label Size Image 1 Screenshot 20

     

    There's also a chance that the CSS or the style on your website page is affecting the style on the form itself. To avoid this, you can re-embed your form to your website using the iFrame embed code, to get the iFrame embed code, here's a guide that you can follow: https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

    Let us know if that helps. 

  • NACWPI
    Replied on January 26, 2017 at 8:45 PM
    The CSS code worked perfectly, thank you.
    Though I’ve adjusted the width of all fields to match, they still show different lengths: https://nacwpi.wildapricot.org/Clinic-Proposals Any other suggestions?
    ...
  • liyam
    Replied on January 27, 2017 at 1:11 AM

    Thank you for your update, NACWPI. We're glad that your concern has been sorted out.

    Can you also give us an idea on what you mean by fields showing different lengths? So far this is how the form on your page appears on my view:

    Field and Sub Label Size Image 1 Screenshot 20

    We'll look forward to your response.

  • NACWPI
    Replied on January 27, 2017 at 11:44 AM

    Field and Sub Label Size Image 1 Screenshot 20

    Is this an issue with my browser then perhaps?

  • liyam
    Replied on January 27, 2017 at 12:40 PM

    Thanks for the screenshot. 

    Yes, this definitely is a browser-related matter. IE has the strangest method of rendering CSS codes. What you can do here is insert a width-specific CSS code for your fields to all have the same width. You can use this code:

    .form-textbox {
      width : 400px !important;
    }

    If you wish to learn how to insert/inject CSS into your form, you can follow the steps from this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Thanks.