All docs
V22.1
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Resize and Relocate

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

jQuery
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");
        } 
    });
});
Angular
HTML
TypeScript
<dx-toast
    [(visible)]="isVisible"
    type="error"
    message="Connection problem"
    [height]="55"
    [width]="300">
</dx-toast>
<dx-button
    text="Show the Toast"
    (onClick)="isVisible = true">
</dx-button>
import { DxToastModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    isVisible: boolean = false;
}
@NgModule({
     imports: [
         DxButtonModule,
         DxToastModule,
         // ...
     ],
     // ...
 })
Vue
<template>
    <div>
        <DxToast
            v-model:visible="isVisible"
            message="Connection problem"
            type="error"
            :height="55"
            :width="300"
        />
        <DxButton
            text="Show the Toast"
            @click="onClick"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxToast } from 'devextreme-vue/toast';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxToast,
        DxButton
    },
    data() {
        return {
            isVisible: false
        };
    },
    methods: {
        onClick() {
            this.isVisible = true;
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Toast } from 'devextreme-react/toast';
import { Button } from 'devextreme-react/button';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isVisible: false
        };

        this.onClick = this.onClick.bind(this);
        this.onHiding = this.onHiding.bind(this);
    }

    onClick() {
        this.setState({
            isVisible: true
        });
    }

    onHiding() {
        this.setState({
            isVisible: false
        });
    }

    render() {
        return (
            <div>
                <Toast
                    visible={this.state.isVisible}
                    message="Connection problem"
                    type="error"
                    height={55}
                    width={300}
                    onHiding={this.onHiding}
                />
                <Button
                    text="Show the Toast"
                    onClick={this.onClick}
                />
            </div>
        );
    }
}

export default App;

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

jQuery
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");
        } 
    });
});
Angular
HTML
TypeScript
<dx-toast
    [(visible)]="isVisible"
    type="error"
    message="Connection problem">
    <dxo-position
        my="left"
        at="left"
        of="#targetElement">
    </dxo-position>
</dx-toast>
<dx-button
    text="Show the Toast"
    (onClick)="isVisible = true">
</dx-button>
import { DxToastModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    isVisible: boolean = false;
}
@NgModule({
     imports: [
         DxButtonModule,
         DxToastModule,
         // ...
     ],
     // ...
 })
Vue
<template>
    <div>
        <DxToast
            v-model:visible="isVisible"
            message="Connection problem"
            type="error">
            <DxPosition
                my="left"
                at="left"
                of="#targetElement"
            />
        </DxToast>
        <DxButton
            text="Show the Toast"
            @click="onClick"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxToast, DxPosition } from 'devextreme-vue/toast';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxToast,
        DxButton,
        DxPosition
    },
    data() {
        return {
            isVisible: false
        };
    },
    methods: {
        onClick() {
            this.isVisible = true;
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Toast, Position } from 'devextreme-react/toast';
import { Button } from 'devextreme-react/button';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isVisible: false
        };

        this.onClick = this.onClick.bind(this);
        this.onHiding = this.onHiding.bind(this);
    }

    onClick() {
        this.setState({
            isVisible: true
        });
    }

    onHiding() {
        this.setState({
            isVisible: false
        });
    }

    render() {
        return (
            <div>
                <Toast
                    visible={this.state.isVisible}
                    message="Connection problem"
                    type="error"
                    onHiding={this.onHiding}>
                    <Position
                        my="left"
                        at="left"
                        of="#targetElement"
                    />
                </Toast>
                <Button
                    text="Show the Toast"
                    onClick={this.onClick}
                />
            </div>
        );
    }
}

export default App;

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

See Also