Textinput: height not correctly calculated in Firefox

[jhogervorst]

Textareas are automatically resized (in height) to prevent scrollbars from appearing, using this code (lines 61-65 in js/widgets/forms/autogrow.js):

this.element.css({
    height: "auto"
}).css({
    height: this.element[0].scrollHeight + 15 + "px"
});

The scrollHeight property of an element is expected to be the height of the content of the element (text in the textarea) and the padding before and after the content (padding-top and padding-bottom of the textarea). The problem is that, in Firefox, padding heights are not included in the scrollHeight if no scrollbar is visible.

This calculated height is assigned to the element using the jQuery .css() method, by directly updating the CSS height property. Because of the border-box box-sizing method, the element is displayed as if the height included the border + padding + content.

This means that we're assigning the content height (from scrollHeight) as if it were the border + padding + content height (thus removing the border and padding height from the content height, making the element taller than intended).

This is a known problem:

• Bugzilla
• Stack Overflow

[jhogervorst]

I'll submit a PR as soon as PR #6180 is accepted (that solves issue #6178), as the fix for this issue would conflict with the fix for the other issue (if they're submitted at the same time).

[jhogervorst]

I'll submit a PR as soon as PR #6290 is accepted (that solves issue #5688), as the fix for this issue would conflict with the fix for the other issue (if they're submitted at the same time).