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

Closed
jhogervorst opened this Issue Jul 16, 2013 · 0 comments

Comments

Projects
None yet
1 participant
@jhogervorst
Contributor

jhogervorst commented Jul 16, 2013

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"
});

Furthermore textareas get the .ui-input-text class assigned (see line 68 in js/widgets/forms/textinput.js), which contains box-sizing: border-box; (see line 19 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 .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 + padding height (from scrollHeight) as if it were the border + padding + content height (thus removing the border height from the content height, making the element taller than intended).

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