CSS Resize
In this page:
selector {
resize: none | both | horizontal | vertical;
overflow: auto;
}resize Property Values
resize none, both, horizontal, और vertical accept करता है, control करते हुए कि एक user-visible drag handle किन directions में किसी element को बढ़ने या सिकुड़ने देती है।
- comment boxes पर resize: vertical इस्तेमाल करें ताकि users layout को गलती से wide किए बिना लिखने के लिए ज़्यादा जगह बना सकें।
- Accepted values:
- none — resizable नहीं (default)
- both — दोनों directions में resize
- horizontal — सिर्फ width
- vertical — सिर्फ height
- block | inline — direction-aware resizing
- visible के अलावा overflow चाहिए
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: The resize Property Values
<style>
.box {
resize: both;
overflow: auto;
width: 150px;
height: 100px;
background: lightblue;
border: 1px solid #666;
}
</style>
<div class="box">Drag the corner to resize</div>overflow क्यों ज़रूरी है
resize property सिर्फ तभी active होती है जब overflow को hidden, scroll, या auto set किया जाए, क्योंकि browser को यह जानना ज़रूरी है कि box का size उसकी default से मेल न खाने पर content कैसे manage करे, default overflow: visible इसके लिए कोई mechanism नहीं देता।
उदाहरण: Why overflow Is Required
<style>
.box {
resize: both;
overflow: auto;
width: 150px;
height: 80px;
background: lightgreen;
border: 1px solid #666;
}
.broken {
resize: both;
width: 150px;
height: 80px;
background: lightpink;
border: 1px solid #666;
margin-top: 10px;
}
</style>
<div class="box">Works: overflow is set</div>
<div class="broken">Does nothing: overflow is still visible</div>Textarea Resize Behavior
Browsers automatically textarea elements पर resize: both लागू करते हैं क्योंकि उनकी already default रूप से overflow: auto है, textareas को वह अकेला element बनाते हुए जहाँ resize बिना extra CSS के out of the box काम करता है।
- किसी resizable textarea पर एक sensible min-height set करें ताकि users गलती से इसे किसी unusable sliver तक न सिकोड़ सकें।
- Accepted values:
- none — कोई resizing नहीं
- both — दोनों directions में resizable
- horizontal — सिर्फ width
- vertical — सिर्फ height
- block / inline — logical directions
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Textarea Resize Behavior
<style>
textarea { width: 240px; height: 80px; border: 2px solid teal; padding: 6px; }
</style>
<textarea>Resizable by default, no extra CSS needed</textarea>एक Custom Resize Handle बनाना
क्योंकि native resize handles को restyle नहीं किया जा सकता, कुछ designs resize: none को एक custom-styled corner element और JavaScript के साथ combine करते हैं ताकि resizing के visual appearance पर पूरा control मिले।
उदाहरण: Building a Custom Resize Handle
<style>
.box {
resize: none;
position: relative;
width: 150px;
height: 100px;
background: lightblue;
border: 1px solid #666;
}
.handle {
cursor: nwse-resize;
position: absolute;
bottom: 0;
right: 0;
}
</style>
<div class="box">
<span class="handle">◢</span>
</div>Resize Direction को Restrict करना
both और none से आगे, horizontal और vertical dragging को एक single axis तक restrict करते हैं, जो तब उपयोगी है जब किसी layout का सिर्फ एक dimension आस-पास के content को तोड़े बिना safely flex कर सकता है।
- resizable sidebar panels के लिए resize: horizontal इस्तेमाल करें ताकि users page के vertical flow को असर किए बिना उन्हें wide या narrow कर सकें।
- Accepted values:
- none — resize नहीं किया जा सकता
- horizontal — सिर्फ width
- vertical — सिर्फ height
- both — width और height
- overflow visible के अलावा होनी चाहिए
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Restricting Resize Direction
<style>
.sidebar {
resize: horizontal;
overflow: auto;
width: 150px;
height: 80px;
background: lightyellow;
border: 1px solid #666;
}
</style>
<div class="sidebar">Only widens or narrows, not taller</div>- किसी element पर overflow को visible के अलावा किसी value पर set किए बिना resize set करना, जब तक overflow hidden, scroll, या auto न हो resize का कोई असर नहीं होता।
- यह उम्मीद करना कि resize inline elements पर काम करेगा, resize सिर्फ उन elements पर लागू होता है जो block-level हैं या जिनकी block या inline-block जैसी defined display है।
- यह मान लेना कि resize default रूप से सभी form elements पर supported है, browsers द्वारा out of the box सिर्फ textarea पर resize enabled है।
- resize users को एक handle drag करके किसी element के dimensions manually बदलने देता है, both, horizontal, vertical, और none values के साथ।
- resize को लागू होने के लिए overflow को visible के अलावा किसी value पर set होना चाहिए।
- textarea elements पर browsers default रूप से resize: both लागू करते हैं, जिसे आप ज़रूरत के हिसाब से override या restrict कर सकते हैं।
resize हर modern browser में supported है सिवाय इसके कि कुछ पुराने versions में Safari पर textarea के अलावा elements पर इसका कोई असर नहीं होता; both, horizontal, और vertical values Chrome, Firefox, और Edge में broadly काम करती हैं।
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: