cferdinandi / cferdinandi/vanilla-js-toolkit

Textarea Auto Height

Open
#13 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
CSS
Stars
91
Forks
14
PR merge metrics
No merged PRs in 30d

Description

## Textarea Auto Height

**You may want to use such a function.**

- Inserts the new line in the correct order each time. _Other methods change the time to add new lines as the content gets longer, and they start adding 2 lines after a certain content._
- Also, in this function, the maximum growth height can be defined.
- This function also takes into account the border width.

## Example

https://codepen.io/ionurboz/pen/RwRexRp

## Code

```js
function textareaAutoHeight(el)
{
var elBorderWith = parseInt(getComputedStyle(el).borderWidth) || 0;

el.style.height = 'auto';

var elHeight = el.scrollHeight + (elBorderWith * 2);

var elMaxHeight = parseInt(el.dataset.autoheight || 800);

el.style.overflowY = 'hidden';

if(elHeight > elMaxHeight)
{
elHeight = elMaxHeight;

el.style.removeProperty('overflow-y');
}
el.style.height = (elHeight) + 'px';
};
```

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue provides a standalone JavaScript entry point, textareaAutoHeight, and a CodePen example. Start by comparing the function with the repository's existing snippet organization; no file or test is named in the issue. Done means the requested auto-height behavior, maximum-height handling, and border-width handling are represented in the project.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.