All docs
V23.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery Toast - 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