More examples in the testsuite.
Just include the script anywhere in the page:
<script src="stretchy.min.js" async></script>
By default, it applies to all
<select> menus with no
size attribute and
<input> elements that are text fields (e.g. with no
type attribute, or with one equal to
To limit that set further you can use the
data-stretchy-filter attribute, on any element. Note that this means you can use the attribute on the
<script> element that calls Stretchy itself, in which case you can also shorten its name to
For example, to restrict it to elements that either have the
foo class or are inside another element that does, you could use
data-stretchy-filter=".foo, .foo *" on an element or call Stretchy like this:
<script src="stretchy.min.js" data-filter=".foo, .foo *" async></script>
If you specify the
data-stretchy-filter attribute on multiple elements, the last value (in source order) wins.
data-filter directly on Stretchy’s
<script> element takes priority over any
Stretchy.selectors.filter = ".foo, .foo *";
Note that to prevent Stretchy from being applied to elements that don’t match the selector at all, you would need to run that line before
Stretchy has a spartan API, since in most cases you don’t need to call it at all. Stretchy works via event delegation and detects new elements via mutation observers, so you do not need to call any API methods for adding new elements via scripting (e.g. AJAX).
If needed, these are Stretchy’s API methods:
Stretchy.resize()to a collection of elements, or all Stretchy is set to apply to, if no argument is provided.
data-stretchy-selector, if the attribute is set.
falseto temporarily disable Stretchy.