JavaScript/jQuery Resizable - Overview

jQuery

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

<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%
}

jQuery

$(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.

<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.

jQuery

• Create and Configure a Component

Angular

• Component Configuration Syntax

Vue

• Component Configuration Syntax

React

• Component Configuration Syntax