JavaScript/jQuery Resizable - Overview

The Resizable UI component enables its content to be resizable in the UI.

View Demo

jQuery

The following code adds a resizable image to your page. Note that the image occupies 100% of the Resizable UI component.

HTML
JavaScript
CSS
<div id="resizable">
    <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
</div>
$(function() {
    $("#resizable").dxResizable({
        width: 200,
        height: 200,
        minWidth: 30,
        minHeight: 30,
        maxWidth: 500,
        maxHeight: 500 
    });
});
#image {
    height: 100%;
    width: 100%
}
NOTE
We recommend specifying the width- and height-related properties of the Resizable, because the content usually takes them into account.

To specify which sides of the Resizable - top, bottom, left, right or all at once - can be used for resizing content, set the handles property. Note that this property can accept several values separated with space.

jQuery
JavaScript
$(function() {
    $("#resizable").dxResizable({
        // ...
        handles: "left right"
    });
});
jQuery

If the Resizable UI component contains other UI components, make sure that it is instantiated before the UI components. For example, the following code creates a resizable Chart. Note that the Resizable goes before the Chart in the JavaScript code, and that makes the Resizable instantiated before the Chart.

HTML
JavaScript
CSS
<div id="resizable">
    <div id="chart"></div>
</div>
$(function() {
    $("#resizable").dxResizable({
        height: 400,
        width: 700,
        maxHeight: 500,
        maxWidth: 900,
        minHeight: 200,
        minWidth: 400,
        onResizeEnd: function (e) {
            $("#chart").dxChart("render");
        }
    });

    $("#chart").dxChart({
        dataSource: [
            { arg: 'Oranges', val: 10 },
            { arg: 'Apples', val: 15 },
            { arg: 'Bananas', val: 9 }
        ],
        series: { type: "bar" }
    });
});
#chart {
    height: 100%;
    width: 100%
}

In the previous code, the handler of the resizeEnd event contains commands that rerender the Chart. That is because the Chart cannot track changes in the size of its container, and therefore, cannot be resized automatically each time such a change occurs. Apply this technique each time the content of the Resizable needs to be resized manually.

In addition to the resizeEnd event, the Resizable UI component fires the resizeStart and resize events. They also can be handled to resize the content of the Resizable UI component.

See Also
jQuery
Angular
Vue
React