About the CSS Resize Generator
The resize property hands sizing control to the person using the page. Setting it to both puts a grab handle in the bottom right corner of an element; horizontal and vertical restrict the drag to one axis, while block and inline do the same thing but follow the writing direction, so they flip sensibly in a vertical or right to left layout.
One requirement catches people out. The handle only appears when the element has a computed overflow other than visible, which is why an overflow value is always written alongside. That is also why textareas are resizable by default: their overflow is already auto. Setting resize: none is the standard way to lock a textarea so a dragged corner cannot break a carefully tuned form layout.
The four limit fields matter as much as the starting size. Without a maximum, a visitor can drag a panel wider than its container and force the whole page to scroll sideways; without a minimum, a box can be collapsed until its content is unreadable. Values here are validated against each other, so a minimum larger than its matching maximum is rejected rather than silently clamped. Note that resizing is a purely visual change and nothing is persisted, so a page reload returns the box to the size in your stylesheet. If you want the box to look framed as well as behave well, the Border Generator writes the edges.
How to use
- Pick a resize direction. Use both for a free floating panel, or a single axis when only one dimension should change.
- Set the starting width and height, then set minimum and maximum limits so the box cannot be dragged into an unusable shape.
- Drag the corner of the preview box to check the limits feel right.
- Copy the rule into your stylesheet, or download it as a file.
Common questions
- Why does nothing happen when I set resize?
- The element needs an overflow value other than visible before the handle is drawn. Adding overflow: auto is enough in almost every case.
- Does resize work on inline elements?
- No. The property is ignored on inline boxes and on elements whose overflow is visible. Give the element display: inline-block or display: block first.
- How do I stop users resizing a textarea?
- Set resize: none on the textarea. Consider resize: vertical instead, which keeps the form column intact while still letting people see more of what they typed.
- Can I put the drag handle in a different corner?
- Not with the resize property alone. The handle position follows the writing direction, so a right to left document puts it in the bottom left corner automatically.