DevExtreme React - Resize and Relocate

To change the size of the Toast, specify the height and width options.

HTML
JavaScript
<div id="toastContainer"></div>
<div id="buttonContainer"></div>
$(function() {
    $("#toastContainer").dxToast({
        message: "Connection problem",
        type: "error",
        height: 55,
        width: 300
    });

    $("#buttonContainer").dxButton({
        text: "Show the Toast", 
        onClick: function () {
            $("#toastContainer").dxToast("show");
        } 
    });
});

If you need to position the Toast against a specific element on your page, set the position option.

JavaScript
$(function() {
    $("#toastContainer").dxToast({
        message: "Connection problem",
        type: "error",
        position: {
            my: "left",
            at: "left",
            of: "#targetElement"
        }
    });

    $("#buttonContainer").dxButton({
        text: "Show the Toast", 
        onClick: function () {
            $("#toastContainer").dxToast("show");
        } 
    });
});

This configuration of the position option reads as follows: "place my left side at the left side of the "#targetElement".

See Also