Textinput: height not correctly calculated due to box-sizing #5690

jhogervorst opened this Issue Feb 24, 2013 · 0 comments


None yet

2 participants


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

var scrollHeight = input[ 0 ].scrollHeight,
    clientHeight = input[ 0 ].clientHeight;

if ( clientHeight < scrollHeight ) {
    input.height( scrollHeight + extraLineHeight );

Furthermore textareas get the .ui-input-text class assigned (see line 49 in js/widgets/forms/textinput.js), which contains box-sizing: border-box; (see line 14 in css/structure/jquery.mobile.forms.textinput.css).

The scrollHeight property of an element is 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 value of this property is used to calculate the new height for the textarea (see the second to last line in the first code block in this post).

This calculated height is assigned to the element using the jQuery .height() method. This method "is always the content height".

This means that we're assigning the content + padding height (from scrollHeight) as if it were the content height only (thus adding the padding height to the content height, making the element higher than intended).

@jaspermdegroot jaspermdegroot pushed a commit that closed this issue Apr 3, 2013
@jhogervorst jhogervorst Textinput: calculated height without extra padding. Fixed #5690 - Tex…
…tinput: height not correctly calculated due to box-sizing
@KyleAMathews KyleAMathews referenced this issue in andreypopp/react-textarea-autosize Aug 14, 2014

Implemented component without jQuery #6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment