CSS properties - resize

revision:

resize property

- defines if (and how) an element is resizable by the user.

The resize property does not apply to inline elements or to block elements where overflow="visible". So, make sure that overflow is set to "scroll", "auto", or "hidden".

CSS syntax : resize: none | both | horizontal | vertical | initial | inherit;

Property values:

none : default value. The user cannot resize the element

both : the user can resize both the height and width of the element

horizontal : the user can resize the width of the element

vertical : the user can resize the height of the element

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.resize="both"

example: rsize

Let the user resize both the height and the width of this div element.

To resize: Click and drag the bottom right corner of this div element.


Let the user resize only the height of this div element.

To resize: Click and drag the bottom right corner of this div element.

code: 
                    <div>
                        <div id="sizing">
                            <p>Let the user resize both the height and the width of this div element.</p>
                            <p>To resize: Click and drag the bottom right corner of this div element.</p>
                        </div><br>
                        <div id="sizing-A">
                            <p>Let the user resize only the height of this div element.</p>
                            <p>To resize: Click and drag the bottom right corner of this div element.</p>
                        </div>
                    </div>
                    <style>
                    div#sizing {border: 0.2vw solid blue; padding: 2vw; width: 20vw; resize: both; overflow: auto;}
                    div#sizing-A {border: 0.2vw solid blue; padding: 2vw; width: 20vw; resize: horizontal; overflow: auto;}
                    </style>