Intermediate LevelCSS & Modern Layouts
How does the CSS resize property enable user-resizable elements?
❓ Interview Prompt: Explain the resize property for textareas, panels, and custom resizable containers.
The resize property enables users to manually resize elements by dragging a handle:
•
resize: none — disables resizing (often applied to textareas).•
resize: both — resize horizontally and vertically.•
resize: horizontal — only horizontal resizing.•
resize: vertical — only vertical resizing (recommended for textareas).Requirement:
The element must have overflow set to something other than visible (typically auto or hidden).
Code Implementation Example
css
/* Vertically resizable textarea */
textarea {
resize: vertical;
min-height: 120px;
max-height: 500px;
}
/* Resizable sidebar panel */
.sidebar {
resize: horizontal;
overflow: auto;
min-width: 200px;
max-width: 500px;
width: 300px;
}💡Resizable textarea and sidebar panel.
🎯 Interview Key Takeaway
Use resize: vertical on textareas and resize: horizontal on sidebars. Requires overflow other than visible.
#Resize#UI#Interaction#Intermediate
Back to all CSS & Modern Layouts Questions→