Adapt a text input's size to its content using a custom Vue.js directive

vue-input-autowidth

Resize the width of an input based on its content using a Vue custom directive. The idea is that an input should not be much bigger than its content for styling for functional purposes, more below.

Input Demo

Example

To start working with this directive use the following command to install it:

npm

npm install --save vue-input-autowidth

yarn

yarn add vue-input-autowidth

Import it in your project

import Vue from 'vue'
import App from './App'

import VueInputAutowidth from 'vue-input-autowidth'
Vue.use(VueInputAutowidth)

There are options below which you can use to make it fit your needs.

Options

  • maxWidth: The maximum width the input field will grow.
  • minWidth: The minimum width the input field will shrink.
  • comfortZone: The additional space in pixels to add to the far side of the input's content.

Usage

Using some of the options above we can create the following example:

<template>
  <div class="hello">
    <input
      class="fix"
      type="text"
      v-autowidth="{maxWidth: '960px', minWidth: '20px', comfortZone: 0}"
      v-model="name"
      placeholder="Watch me change size with my content!"
    />
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: '',
    }
  }
}
</script>

And there it is, a customized input which changes its width automatically, easy and fast.

This project is open source available on GitHub.