Skip to content

Textarea autoresize does not respect its border #847

Closed
@derMart

Description

@derMart

The size of the Textarea in autoresize mode is calculated by:

this.$el.style.height = this.$el.scrollHeight + 'px';

An elements scrollHeight, however, just returns the content height + padding. It does not include the border, see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
As box-sizing is set to border-box $el.style.height will set the height including the border, so that the border height is missing for the content, cutting off characters like a g at the bottom in Firefox for me.
The correct way to set the height is to calculate the needed space including the border,e.g. like so instead:

const style = window.getComputedStyle(this.$el);
this.$el.style.height = `calc(${style.borderTopWidth} + ${style.borderBottomWidth} + ${this.$el.scrollHeight}px)`;

This fixes the issue and should calculate the correct height in a standard way.

Activity

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

Metadata

Metadata

Assignees

Labels

Type: BugIssue contains a bug related to a specific component. Something about the component is not workingvue2-portable

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions