Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Textarea autoresize does not respect its border #847

Closed
derMart opened this issue Jan 8, 2021 · 0 comments
Closed

Textarea autoresize does not respect its border #847

derMart opened this issue Jan 8, 2021 · 0 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working vue2-portable
Milestone

Comments

@derMart
Copy link

derMart commented Jan 8, 2021

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.

@cagataycivici cagataycivici self-assigned this Jan 20, 2021
@cagataycivici cagataycivici added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Jan 20, 2021
@cagataycivici cagataycivici added this to the 3.2.0-rc.1 milestone Jan 20, 2021
@cagataycivici cagataycivici changed the title Textarea autoresize does not respect its border (FIX included) Textarea autoresize does not respect its border Jan 20, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working vue2-portable
Projects
None yet
Development

No branches or pull requests

2 participants