DevExtreme Angular - 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, // ... ], // ... })
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, // ... ], // ... })
This configuration of the position option 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.