[Vuejs]-Tailwind CSS with Nuxt3 grow text-area size dynamically

by

0👍

✅

                        <textarea
                            v-else
                            class="w-full pt-3 bg-transparent chat-input-area form-input placeholder:text-slate-400/70"
                            placeholder="Write the messages.." 
                            v-model="messageInput"
                            style="height: 450px!important;"
                            @keyup.enter="sendMessageOnEnter"
                            @input="handleInput" 
                            :style="{'height': (messageInput.split('\n').length * 1.5) + 'rem', 'max-height': '15rem','min-height': '2.8rem'}"
                            spellcheck="false"
                        ></textarea>

0👍

this code is working for me

<div class="bg-black rounded-lg w-[calc(100%-50px)] font-light">
    <div class="pt-2 text-gray-300 bg-black w-full">                               
           <textarea id="textarea" v-model="content" @input="adjustTextareaHeight()" class="w-full resize-none bg-black outline-none" placeholder="Start a thread...">
           </textarea>                                
   </div>
</div>

const adjustTextareaHeight = () => {
     const textarea = document.getElementById("textarea")
     textarea.style.height = "auto"
     textarea.style.height = textarea.scrollHeight + "px"
}

Leave a comment