Inconsistent short/long text element width between browsers

  • Profile Image
    jimla
    Asked on May 12, 2017 at 07: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

  • Profile Image
    Nik_C
    Answered on May 13, 2017 at 03: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!

     

  • Profile Image
    jimla
    Answered on May 15, 2017 at 08: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;

    }

     

     

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

  • Profile Image
    jimla
    Answered on May 16, 2017 at 01: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    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

  • Profile Image
    Nik_C
    Answered on May 16, 2017 at 02: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!