DevExtreme React - 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