Inconsistent short/long text element width between browsers

The width of the box for short and long text elements is inconsistent between browsers. See the example screen shots. How do I make the boxes for short and long text elements display the same width for all browsers?

Text Entry form: https://form.jotform.us/71317621044144

Thanks,

Jim

Safari

Firefox

Chrome

IE 11

It is actually a known issue between browsers that the input fields are showing differently. Here is the forum thread about it.

The solution is to use box-sizing in CSS. I found more about it here and here. So setting the box sizing to content box for input field should solve the problem:

box-sizing: content-box;

Please try and let us know how it worked.

Thank you!

Hi Nik,

I added the following css code, but it did not affect the box width display for different browsers.

Jim

.form-textbox {

   box-sizing : content-box;

}

.form-textarea {

    box-sizing : content-box;

}

I see as well that it is not affecting for IE11 browsers only.

It does work for Chrome and Firefox browser.

I will forward this thread to our next level support for the designer to see the issue. 

We will notify you here for any update on the status about it.

Thank you.

My example specified the width option for Short Text Entry as 65 characters and Long Text Entry as 65 columns. However, different browsers display different number of characters:

                         Safari  Firefox  Chrome  IE11
Short Text Entry  68      66         54         55    characters
Long Text Entry   60      67         66         52    characters

Note that Chrome and IE11 truncate the Short Text Entry width much less than specified. Safari and IE11 truncates the Long Text Entry. Is there a way to specify the Text Entry width so all browsers display the same number of characters?

Thanks,

Jim

Thank you for additional inputs, your message will reach our backend team. 

Regarding the field width, I found this forum thread (similar to the previous one): http://stackoverflow.com/questions/4073768/how-to-get-equal-width-of-input-and-select-fields

The CSS there should make the form fields show the same cross-browser.

Please try and let us know if it helped.

Thank you!