All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Resize and Relocate

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

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
            :visible.sync="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.common.css';
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.common.css';
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 option.

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
            :visible.sync="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.common.css';
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.common.css';
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 option reads as follows: "place my left side at the left side of the "#targetElement".

See Also