Auto-resize Element's Width Based On Its Content - jQuery dynamicWidth.js

File Size: 4.05 KB
Views Total: 210
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto-resize Element's Width Based On Its Content - jQuery dynamicWidth.js

A dead simple jQuery resize plugin that dynamically resizes the width of any element according to its content length.

It is particularly useful for textboxes like input fields and text fields.  As the user types or enters text, the plugin automatically adjusts the width of the element in real time to match the changing content.

How to use it:

1. To use the dynamic-width plugin, include the jquery.dynamicWidth.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.dynamicWidth.js"></script>

2. Call the dynamicWidth() method on the element you want to resize.

<input type="text" />
$('input,textarea').dynamicWidth({
  // options here
});

3. Call the dynamicWidth() method on the element you want to resize.

<input type="text" />
$('input').dynamicWidth({
  // options here
});

4. Call the min width of the resizable element. Default: 0.

$('input').dynamicWidth({
  minWidth: 200,
});

5. Add a right padding to the resizable element. Default: 3(px).

$('input').dynamicWidth({
  additionalPadding: 10,
});

This awesome jQuery plugin is developed by samliew. For more Advanced Usages, please check the demo page or visit the official website.