Same text box appears 30px larger on Firefox than on Chrome

  • Profile Image
    Asked on December 01, 2019 at 11:33 AM

    I have a form that contains ~400 overlapping fields, appearing conditionally, assigned to the same absolute position.  These fields make up the panels of a spinnaker sail that is shown in the middle of my form.  I have trouble specifying gaps between my form's fields (vertically) so that the fields at the absolute position don't overlap a field positioned relatively because Chrome and Firefox present the same text box field differently. 

    The field is a Long Text Entry labeled "Comments About The Ordered Spinnaker " with #id_366.  On Firefox, the field appears to be about 110px high while on Chrome, it appears about 80px high.   (See the comparison revealed by a green rectangle below.)  The same thing happens on another Long Text Entry nearer the bottom of the form.  Do you know of any way to define the field so that both browsers display it at the same height?


  • Profile Image
    Answered on December 01, 2019 at 12:01 PM

    You were right. There is a considerable difference in the text-box heights between Chrome and Firefox.

    You may try adding the following CSS code to your form and see if it makes the fields' height fixed even on different browsers:

    textarea#input_366 {

        height: 80px!important;


    Just adjust the height value based on preference.