Browsers allow text-areas to be re-sized by dragging their corner by default. I was wondering if this rule could be applied to other elements (a div for instance). I know this effect could be achieved using the jQuery draggable
or the jQuery-ui resizable
function, but I would like to do it with plain html / css if it is possible to avoid relying on that library. Are their any CSS rules that I could apply to a div to make it behave in this way?
If you have any other solution I would like to hear it.
Answer: Use the CSS display Property You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
Use the css3 resize
property.
div { resize: both; }
There is also a resize: horizontal
and resize: vertical
.
Not currently cross browser http://caniuse.com/#feat=css-resize
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With