-
jimlaAsked on May 12, 2017 at 7:51 PM
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
Page URL: https://form.jotform.us/71317621044144 -
Nik_CReplied on May 13, 2017 at 3:36 AM
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!
-
jimlaReplied on May 15, 2017 at 8:57 PM
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;
}
-
jonathanReplied on May 16, 2017 at 12:07 AM
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.
-
jimlaReplied on May 16, 2017 at 1:38 PM
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 charactersNote 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
-
Nik_CReplied on May 16, 2017 at 2:05 PM
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!