Field and Sub Label Size

  • Profile Image
    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.

     

  • Profile Image
    Charlie
    Answered 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: 

     

    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. 

  • Profile Image
    NACWPI
    Answered on January 26, 2017 at 08: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?
    ...
  • Profile Image
    liyam
    Answered on January 27, 2017 at 01: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:

    We'll look forward to your response.

  • Profile Image
    NACWPI
    Answered on January 27, 2017 at 11:44 AM

    Is this an issue with my browser then perhaps?

  • Profile Image
    liyam
    Answered 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.