Sadrazam – AutosizeTextarea Showcase
Textareas that automatically resize their height based on content
Basic Usage
Add data-autosize attribute, then call Sadrazam.AutosizeTextarea.listen()
Default
With content
Code
<textarea data-autosize></textarea>
Different Initial Sizes
Textareas with different initial rows attribute values
1 Row
3 Rows
5 Rows
Code
<textarea data-autosize rows="3"></textarea>
Max Height Constraint
Use CSS max-height to cap how tall the textarea can grow. Overflow becomes scrollable.
Max 80px
Max 150px
Max 300px
Code
<textarea data-autosize style="max-height: 150px"></textarea>
Different Widths
Width affects how text wraps and consequently how tall the textarea becomes
Small (300px)
Medium (450px)
Full Width
Custom Selector
Use a custom CSS selector instead of the default data-autosize attribute
Custom class
Code
Sadrazam.AutosizeTextarea.listen('.my-autosize')
Programmatic Control
Manual update and destroy via .update() and .destroy()
Controlled
Methods
Sadrazam.AutosizeTextarea.update(el)
Sadrazam.AutosizeTextarea.destroy(el)
Events
Listen for the autosize:resized event dispatched after each resize
With events
Waiting for resize events...
Event name
autosize:resized