JavaScript/jQuery Toast - Resize and Relocate

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

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");
  • }
  • });
  • });

If you need to position the Toast against a specific element on your page, set the position property.

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");
  • }
  • });
  • });

This configuration of the position property reads as follows: "place my left side at the left side of the "#targetElement".

See Also