Sadrazam – AutosizeSelect Showcase
Select elements that automatically resize their width based on the selected option
Basic Usage
Add data-autosize-select attribute, then call Sadrazam.AutosizeSelect.listen()
Default
data-autosize-select
Code
<select data-autosize-select>...</select>
Short Options
Select with brief, uniform-length options
Status
Priority
Boolean
Mixed Option Lengths
Options with dramatically different text lengths — watch the select shrink and expand
Countries
Roles
Categories
Long Options
All options are lengthy text strings
Descriptions
File paths
Multiple Selects Inline
Several auto-sized selects side by side — useful for filter bars and form rows
Filter bar
Date range
Custom Selector
Use a custom CSS selector instead of the default data-autosize-select attribute
Custom class
Sadrazam.AutosizeSelect.listen('.my-autosize-select')
Programmatic Control
Manual update and destroy via .update() and .destroy()
Controlled
Methods
Sadrazam.AutosizeSelect.update(el)
Sadrazam.AutosizeSelect.destroy(el)