dwyl / dwyl/learn-alpine.js

How to make `textarea` auto-resize with Alpine.js

Open
#3 6 comments 0 reactions 1 assignee Claimed by @SimonLab View on GitHub
discuss enhancement help wanted priority-1 research spike T2h technical
Dominant language
Elixir
Stars
18
Forks
0
Avg merge
1d 17h
Merged PRs (30d)
3

Description

At present we have a **``** for capturing **`items`** in the MVP App:
![image](https://user-images.githubusercontent.com/194400/178142011-318bf695-5d81-4210-8314-6f919bea9232.png)

If we input too much text into the **`<textarea>`** it starts to scroll which is a poor experience on mobile.

On desktop it _kinda_ works to have a smaller box ...

![image](https://user-images.githubusercontent.com/194400/178952264-034cae9d-0928-4fd9-a5a5-752073222128.png)

But it would also be nice to tidy up the UX around the input area.

# Todo

+ [ ] Research how to make the **`<textarea>` resize _automatically_** depending on the content.
+ [ ] Should not expand more than the height of the screen minus the **`keyboard`**.

Starting point: https://benborgers.com/posts/alpine-textarea-auto-resize + https://youtu.be/z7130uJ3H7w

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.