Angular 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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.