Auto Resize Input Based On Content – vue-input-autowidth

Description:

The vue-input-autowidth allows to dynamically adjust the width of your input field depending on the length of content.

Usage:

Install it with package managers.

# Yarn
$ yarn add vue-input-autowidth

# NPM
$ npm install vue-input-autowidth --save

Import the ‘vue-input-autowidth’.

import VueInputAutowidth from 'vue-input-autowidth'

Enable the plugin.

Vue.use(VueInputAutowidth)

Apply the plugin to your input field.

<input
  type="text"
  v-autowidth="{maxWidth: '960px', minWidth: '20px', comfortZone: 0}"
  v-model="name"
  placeholder="Type something here."
/>

Options and defaults.

{

  // max width in pixels
  maxWidth: "none", 

  // min width in pixels
  minWidth: "none", 

  // additional space in pixels
  comfortZone: 0
  
}

Preview:

vue-input-autowidth

Download Details:

Author: syropian

Live Demo: https://github.com/syropian/vue-input-autowidth/tree/master/example

Download Link: https://github.com/syropian/vue-input-autowidth/archive/master.zip

Official Website: https://github.com/syropian/vue-input-autowidth

Install & Download:

# Yarn
$ yarn add vue-input-autowidth

# NPM
$ npm install vue-input-autowidth --save

You Might Be Interested In:

Add Comment