CODEWITHSUNDEEP
vue.jsinputautosizev-modelelement-plus
Mark Okoh
Mark Okoh

Reputation: 51

Element-Plus Input component for Vue 3

When autosizing an input (textarea) I’ve created with Element Plus for Vue 3, a new line is created before the text reaches the end of the line being typed. This makes the input box unnecessarily large, and there’s unneeded white space after the text.

Here's a video demo of the issue

Here's my code for the component:

<template>
        <el-input
                :autosize="{ minRows: 1, maxRows: 16 }"
                type='textarea' 
                :input-style="{
                        
                        border: '0px',
                        fontSize: 'large',
                        paddingTop:'15px',
                        paddingBottom:'15px',
                        borderRadius:'0',
                        backgroundColor: 'transparent',
                        minWidth: '100%'                      

                }"
                
            />
 
</template>

<script>


</script>

<style>

</style>

And here's the docs https://element-plus.org/en-US/component/input.html

Any ideas how to fix? Thanks.

Upvotes: 0

Views: 1874

Answers (1)

jack hua
jack hua

Reputation: 1

I think you need to add a "row" attribute to your component

  <el-input
    v-model="textarea"
    :rows="2" //This will keep your textarea at the same height
    type="textarea"
    placeholder="Please input"
  />

Upvotes: 0

Related Questions