{"id":14099,"date":"2011-09-06T12:04:48","date_gmt":"2011-09-06T19:04:48","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14099"},"modified":"2019-01-31T07:29:30","modified_gmt":"2019-01-31T14:29:30","slug":"resize","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/r\/resize\/","title":{"rendered":"resize"},"content":{"rendered":"<p>The <code>resize<\/code> property controls if and how an element can be resized by the user by clicking and dragging the bottom right corner of the element. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.module {\r\n  resize: both;\r\n}<\/code><\/pre>\n<p><strong>Super important to know:<\/strong> <code>resize<\/code> does nothing unless the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/\"><code>overflow<\/code> property<\/a> is set to something other than <code>visible<\/code>, which is its initial value for most elements.<\/p>\n<p>It&#8217;s also worth knowing that Firefox will let you resize an element smaller than its original size. Webkit browsers will not let you resize an element to make it smaller, only larger (in both dimensions).<\/p>\n<h3>Values<\/h3>\n<ul>\n<li><code>none<\/code>: the element is not resizeable. This is the initial value for most elements. The <code>textarea<\/code> element is the most common exception&mdash;in many browsers its default <code>resize<\/code> value is <code>both<\/code>.<\/li>\n<li><code>both<\/code>: the user can resize the element&#8217;s height and\/or width.<\/li>\n<li><code>horizontal<\/code>: the user can resize the element horizontally (increasing the width).<\/li>\n<li><code>vertical<\/code>: the user can resize the element vertically (increasing the height).<\/li>\n<li><code>inherit<\/code>: the element inherits the resize value of its parent.<\/li>\n<\/ul>\n<p>When an element is resizeable, it has a little UI handle on a lower corner. The handle appears on the right on page elements when the page&#8217;s <code>direction<\/code> is set to <code>ltr<\/code> (left-to-right), and on the left on <code>rtl<\/code> (right-to-left) pages.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2010\/07\/noresizer.png\" alt=\"\" title=\"noresizer\" width=\"570\" height=\"129\" class=\"alignnone size-full wp-image-6845\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/07\/noresizer.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/07\/noresizer.png?resize=300%2C68&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" \/><figcaption>An element without the handle (front) and with the handle (back) <\/figcaption><\/figure>\n<h3>Demo<\/h3>\n<p>The resizeable element in this demo is a paragraph. Click the buttons to try out the different <code>resize<\/code> values.<\/p>\n<p data-height=\"450\" style=\"height: 450px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"924da4d0de336b408fa9ecaa7257aecc\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen' data-embed-version=\"2\">See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/924da4d0de336b408fa9ecaa7257aecc\/\" rel=\"noopener\">Resize Demo<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Related<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/\"><code>overflow<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/direction\/\"><code>direction<\/code><\/a><\/li>\n<\/ul>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=\"http:\/\/dev.w3.org\/csswg\/css3-ui\/#resize\" rel=\"noopener\">The Spec<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en\/CSS\/resize\" rel=\"noopener\">Mozilla Docs<\/a><\/li>\n<li><a href=\"http:\/\/davidwalsh.name\/textarea-resize\" rel=\"noopener\">David Walsh&#8217;s article<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/textarea-tricks\/\">Textarea Tricks<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-resize\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">4*<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">4<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"n nope\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The resize property controls if and how an element can be resized by the user by clicking and dragging the bottom right corner of the element. .module { resize: both; } Super important to know: resize does nothing unless the overflow property is set to something other than visible, which is its initial value for [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13945,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1266,1267],"acf":[],"jetpack-related-posts":[{"id":14043,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/cursor\/","url_meta":{"origin":14099,"position":0},"title":"cursor","date":"September 5, 2011","format":false,"excerpt":"The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it's only relevant in browsers\/operating systems in which there is a mouse and cursor. They are used essentially for UX to convey the\u2026","rel":"","context":"In \"cursor\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14158,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/after-and-before\/","url_meta":{"origin":14099,"position":1},"title":"::before \/ ::after","date":"September 6, 2011","format":false,"excerpt":"The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this: div::before {\u2026","rel":"","context":"In \"psuedo elements\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21545,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-size\/","url_meta":{"origin":14099,"position":2},"title":"font-size","date":"May 6, 2013","format":false,"excerpt":"The font-size property specifies the size, or height, of the font. font-size affects not only the font to which it is applied, but is also used to compute the value of em, rem, and ex length units. p { font-size: 20px; } font-size can accept keywords, length units, or percentages\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":185617,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/done-resizing-event\/","url_meta":{"origin":14099,"position":3},"title":"Done Resizing Event","date":"October 6, 2014","format":false,"excerpt":"If you're used to something like jQuery UI resizeable, you get events you can bind to during the resizing, but also at the end of resizing. No such event exists in native JavaScript. You can fake it by setting a timeout to run the code you want to run when\u2026","rel":"","context":"In \"jQuery\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21004,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/track-window-resizes-through-google-analytics\/","url_meta":{"origin":14099,"position":4},"title":"Track Window Resizes through Google Analytics","date":"April 3, 2013","format":false,"excerpt":"Sparkbox has this snippet to help figure out how often browser windows really are resized. (function() { var resizeTimer; \/\/ Assuming we have jQuery present $( window ).on( \"resize\", function() { \/\/ Use resizeTimer to throttle the resize handler clearTimeout( resizeTimer ); resizeTimer = setTimeout(function() { \/* Send the event\u2026","rel":"","context":"In \"google analytics\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4422,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/fit-iframe-to-content\/","url_meta":{"origin":14099,"position":5},"title":"Resize Iframe to Fit Content (Same Domain Only)","date":"January 1, 2010","format":false,"excerpt":"Normally you set and width and height for iframes. If the content inside is bigger, scrollbars have to suffice. The script below attempts to fix that by dynamically resizing the iframe to fit the content it loads. Will resize an iframe like this: \u00a0 View Demo Still problematic... The source\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14099"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14099"}],"version-history":[{"count":14,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14099\/revisions"}],"predecessor-version":[{"id":254457,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14099\/revisions\/254457"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13945"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14099"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}