No video :(

How to Auto Resize Textarea using HTML CSS & JavaScript

Подписаться 227 тыс.

Просмотров 69 тыс.

50% 1

How to Auto Resize Textarea using HTML CSS & JavaScript
In this video, I have shown you how to Auto Resize Textarea to Fit Content using HTML CSS & JavaScript. Auto Resize Textarea means the height of the textarea automatically resizes according to its content. I have also set max-height for this Textarea so it'll start to scroll after the specified max-height.
Download Codes From Here - www.codingnepa...
Second Channel - bit.ly/3aHNkru
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Ikson - Anywhere [Official]
• #66 Anywhere (Official)
Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...

Опубликовано:

27 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 99

@CodingNepal 3 года назад

Hope this video was helpful and remember to Like & Subscribe 💙

@CARTOONWORLD-gv8bt 3 года назад

bro i want chat app what u did in last videos plz send...

@jeenitprajapati3449 3 года назад

Hey CodingNepal! Remembered me?? This video is excellent, excellent, splendid, etc. This will take many days to explain your all videos' review are amazing.

@oliverclennan4809 3 года назад

I was literally struggling with a text area box in a notes app project I am working on, and then this video appears! Thank you so much for the help!

@CodingNepal 3 года назад

Glad it helped!

@incursiogamer6814 2 года назад

Same here

@thegamerfinity886 3 года назад

Bro you are the best out there your videos always sick, I just downloaded 4 of your php, js videos.. Love from below nepal xd💟💟

@CodingNepal 3 года назад

Glad you like them!

@mohamed-hm8pn Год назад

Thank you so much this help me a lot I was try to fix this problem for last 6 hours and finally find this here my problem was to resize height to auto before calculate the scroll height again Thank you again 💐

@mohamadybr 2 года назад

Simple, precise, and straight to the point!! Thanks a lot, u just saved me a lot of time trying things out :)

@CodingNepal 2 года назад

Glad it was helpful :)

@user-ro1pc5tf2j 2 месяца назад

, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing

@gnoega98 8 месяцев назад

6:17 is the actual piece of code that I need. also, feel stupid because I was trying to figure out how to automatically shrink the height and didn't think of putting height on auto. anyway, thank you.

@meto4545 3 месяца назад

There's a slight bug: If the text area becomes bigger than the viewport height, when the user presses a key he's automatically sent to the top of the textarea. To prevent this (since I use React) I first changed from onKeyUp to onChange event listener and then I made sure I remember the user's scrollTop position and set it back after the style.height="" changes.

@COFFY_GAMING 3 года назад

Sir this is really awesome video and project

@CodingNepal 3 года назад

Thanks a lot

@CodingPorium 3 года назад

Awesome video bro, thank you very much!😄

@CodingNepal 3 года назад

Glad you liked it!

@j.villasmil9575 2 года назад

You did it in the best way

@Feel_official_Channel 3 года назад

You Are The Best !💙

@codehellps1073 2 года назад

just love this channel, people

@CodingFire 3 года назад

Amazing video bro

@CodingNepal 3 года назад

Thanks bro

@CodingFire 3 года назад

@@CodingNepal Welcome sir

@alexnganga6401 3 года назад

good one. please a dependent dropdown multi select calculator with javascript or jquery. reference grademiners and then that pop up carousel

@satyarajrana5702 Год назад

Very helpful video, thanks so much!!!!

@leslievelvy 10 месяцев назад

the tutorial was easy after i realized that I was using the wrong class name hahaha thank you 4 this!!

@CreativeTutorialsWeb 3 года назад

Amazing Video Sir

@CodingNepal 3 года назад

Thank you so much and hope it was helpful 😃

@CreativeTutorialsWeb 3 года назад

@@CodingNepal Yes Sir

@sar170 3 года назад

Hello bro iam unable to connect css to html . How to solve this.

@sashachechoitko7215 Год назад

default height of textarea are 2 lines, so if we want to have height less that 2 default lines we need set '0px' instead of 'auto'

@justmyhobby8320 2 года назад

It really helped me. Thank you) 🙂

@ankitneupane 3 года назад

Wow sir This is Awesome

@CodingNepal 3 года назад

Thanks a lot

@rachellepeiris4818 3 года назад

Hey There! Can you please make a tutorial on a POS billing System with ajax 🙂

@lyrichives7859 10 месяцев назад

Thank you so much for this!

@naveenn9380 2 месяца назад

Try this textarea{ field-sizing: content; max-height: 200px; } I saw this on another video, i thought it won't work but it does..

@CodingFire 3 года назад

Project idea: Make a VPN Detector Using Javascript

@kennedymunyao6136 3 года назад

How do you modify the color of the CSS styling in atom editor, like for something like "text-align" ,by default "text-align: center" the "center" is white by default how do I make it orange? Hope I have explained properly. I watched your video about the editor and I did not get those details.

@CodingNepal 3 года назад

You've to install pigments package to show color in color codes and other things are done with emmet

@CodingFire 3 года назад

@@CodingNepal Sir how you have such a nice choice of colors ?

@kennedymunyao6136 3 года назад

@@CodingNepal Thanks Sir

@viditgulyani 2 года назад

How did setting style to auto worked if we put the line above?

@diegoaredes2721 4 месяца назад

nice video.

@mrthegamergp 3 года назад

thank u bro your video is so good

@vnravi83 9 месяцев назад

Is it possible to make it grow from bottom to top ?

@supersub7 3 года назад

can you create tutorial for full blog? please bro!

@nothshop2022 Год назад

can we autosize textarea when change path url on ROR?

@codeurient Год назад

there is 15px padding but it is not including for height. because height is 59 and returned 55. if included padding too may it was 59+14+14= 87px-4px = 83????

@easycoderyt7121 3 года назад

Waiting for downloader

@reving4896 Год назад

why it increase my textarea's height every time i write a word

@axeDev 2 года назад

Thank you, so much

@jackalee1689 Год назад

Thanks 🙏

@franco6034 3 месяца назад

thank you

@mycoadedlife 3 года назад

Bro! Please Do a responsive Footer design. We Will Love That..................:)

@srimanxiic.s2060 3 года назад

RU-vid video downloader. Waiting

@CodingNepal 3 года назад

Please try to understand. This topic is against RU-vid guidelines. So I can't upload video on it but I'll try to write a blog on it.

@dastl6480 Год назад

i love you, thanks

@DenisSvistoplasov Год назад

Isn't better to do it on "input" event?

@कुमार_मिठू 3 года назад

Brother how to create folder file in html page. Example Google drive,

@कुमार_मिठू 3 года назад

Bro How to create upload folder and save document,

@adnanahmad1062 2 месяца назад

great thats work for me... just converted into next js useEffect(() => { const textarea = textareaRef.current; const adjustHeight = () => { textarea.style.height = "auto"; textarea.style.height = `${textarea.scrollHeight}px`; }; const handleKeyup = (e) => { adjustHeight(); }; textarea.addEventListener("keyup", handleKeyup); // Adjust the height on mount adjustHeight(); return () => { textarea.removeEventListener("keyup", handleKeyup); }; }, []);

@SMILEPANT 3 года назад

can you create block based HTML editor? ??

@CodingNepal 3 года назад

I'll think about it

@vdheenadhayalan5802 3 года назад

YT vidoe downloader in blog sir?

@CodingNepal 3 года назад

It's against RU-vid community guidelines So I can't upload a video on it but I'll try to write blog on it.

@PioloLoni 2 года назад

thanks buddy

@Doppio_00 2 года назад

you helped me, you cool thx!😆

@CodingNepal 2 года назад

Glad I could help

@MaemuTendani 2 года назад

I want to implement this on Nintex 2013 form but I have no idea where to start and it's been a 4 days struggle 😢

@MrAndroidianBro 3 года назад

First comment

@CodingNepal 3 года назад

Really..?

@MrAndroidianBro 3 года назад

@@CodingNepal yes.! plz promote my channel

@vasanthivemuri8996 Год назад

You are auto adjusting the height but how to auto adjust the width?

@mainaccount8049 3 года назад

I'm also waiting for youtube video downloader sir

@CodingNepal 3 года назад

Please try to understand. This topic is against RU-vid guidelines. So I can't upload video on it but I'll try to write a blog on it.

@roshanshaw7742 3 года назад

sir, Please make a video on Instagram Image and video download website (how to make this type of website ) Thank you

@wonderson_1 Год назад

How to apply this on react?

@meto4545 3 месяца назад

using the onKeyUp on the textarea element and also using useRef()

@Rawbee 3 года назад

Eautai page maa sabbai menu haru khulni ani nayaa kholdaa paile ko banda huni kasari banaaunu bro(like facebook messege, noification,video),maile bujhaauna sakina bhane bhannus la :)