What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to keep form size consistent on differen't browsers?

    Asked by optizign13 on January 21, 2014 at 01:39 PM

    Hello. Is there a way to keep the input/textarea sizes consistent on all computer browsers?

    I am using this website as an example: http://kingfamilydental.com/. I am using a Mac. Chrome and Safari looks fine. Internet Explorer 10 and Firefox has different issues. I am sending screen shots.

    Right now, I have injected this CSS in form: 

    input, textarea {max-width: 180px}

    @media only screenand (min-device-width : 320px)and (max-device-width : 480px) {.form-textbox, .form-textarea {width: 250px;

    }

    }

    @media only screenand (min-device-width : 768px)and (max-device-width : 1024px) {.form-textbox, .form-textarea {width: 250px;

    }

    }

    Page URL:
    http://kingfamilydental.com/contact-us/

    Screenshot
    size textarea textbox different hello
  • Profile Image
    JotForm Support

    Answered by KadeJM on January 21, 2014 at 02:37 PM

    This is a touchy subject because of the various browsers and kits used to run within their different engines so one website page may display nice whereas in another browser it is slightly off even though it should be the same. The easiest way to change this is by using the @Media directive. It would likely take further tweaking to get it just right.

    You could try using a Normalizing CSS File that is designed to make it the same but depending on your form it may not always work. It may take some time but we'll try to figure this out to make it more generalized across major browsers though I think the Normalizing File already does this for the most part as far as I know.

  • Profile Image

    Answered by optizign13 on January 22, 2014 at 12:20 PM

    Hello. What is the @Media directive and what does it do? Also, what is a normalizing css file? Because I already have a CSS file for my website. 

  • Profile Image
    JotForm Support

    Answered by Welvin on January 22, 2014 at 01:06 PM

    I've modified your custom CSS codes into this:

    input[type="text"], textarea {

    width: 180px;

    }


    Kindly check if that fixes the issue. So far, it's now good to my end.

    @media: Usually applies to the device screen size.

    Normalize CSS: Same as the example above, we uses input type rather than the ID or Class of each form field.

    Thanks

  • Profile Image

    Answered by optizign13 on January 24, 2014 at 03:38 PM

    Thank you, it works.