Improve textarea UX using simple CSS trick

This content originally appeared on DEV Community and was authored by Stas Melnikov

Whenever I see textarea with a fixed height I want to scream: "Give me userfriendly textarea". I want to enter data comfortably. Give me this.

I understand developers do that because textarea changing breaks the layout. But we can find a more elegant solution. Set a minimal comfortable height and save resizing of it but disable width changes using resize: vertical. And your users will not break the layout by chance.

don't do this

textarea {
  height: 10rem;
  resize: none;
}

you can use this instead

textarea {
  min-height: 10rem;
  resize: vertical;
}

P.S.
? I'm always open to any opportunities to share knowledge about CSS and HTML with you. If you need help feel free to reach out to me: melnik909@ya.ru

Get awesome goods for frontenders: ? T-Shirt, ? Stickers, ? Masks, ? Magnets

P.S.S. This post was written with the support of my sponsors: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten.

This content originally appeared on DEV Community and was authored by Stas Melnikov

Print Share Comment Cite Upload Translate Updates

APA

Stas Melnikov | Sciencx (2021-07-27T16:45:45+00:00) Improve textarea UX using simple CSS trick. Retrieved from https://www.scien.cx/2021/07/27/improve-textarea-ux-using-simple-css-trick/

MLA

" » Improve textarea UX using simple CSS trick." Stas Melnikov | Sciencx - Tuesday July 27, 2021, https://www.scien.cx/2021/07/27/improve-textarea-ux-using-simple-css-trick/

HARVARD

Stas Melnikov | Sciencx Tuesday July 27, 2021 » Improve textarea UX using simple CSS trick., viewed ,<https://www.scien.cx/2021/07/27/improve-textarea-ux-using-simple-css-trick/>

VANCOUVER

Stas Melnikov | Sciencx - » Improve textarea UX using simple CSS trick. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/27/improve-textarea-ux-using-simple-css-trick/

CHICAGO

" » Improve textarea UX using simple CSS trick." Stas Melnikov | Sciencx - Accessed . https://www.scien.cx/2021/07/27/improve-textarea-ux-using-simple-css-trick/

IEEE

" » Improve textarea UX using simple CSS trick." Stas Melnikov | Sciencx [Online]. Available: https://www.scien.cx/2021/07/27/improve-textarea-ux-using-simple-css-trick/. [Accessed: ]

rf:citation

» Improve textarea UX using simple CSS trick | Stas Melnikov | Sciencx | https://www.scien.cx/2021/07/27/improve-textarea-ux-using-simple-css-trick/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.