Docs / Resize

Resize

vel-src: interactivity.css

Utilities for controlling how an element can be resized by the user.

ClassProperties
vel-resize-noneresize: none
vel-resizeresize: both
vel-resize-yresize: vertical
vel-resize-xresize: horizontal

Examples

Vertically resizable textarea

example.html
<textarea class="vel-resize-y" rows="3" style="width:100%;max-width:24rem;padding:0.75rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem;color:#e2e8f0;font-family:inherit" placeholder="Resize me vertically..."></textarea>

Non-resizable textarea

example.html
<textarea class="vel-resize-none" rows="3" style="width:100%;max-width:24rem;padding:0.75rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem;color:#e2e8f0;font-family:inherit" placeholder="Fixed size textarea"></textarea>