DevExtreme Angular - Resize and Relocate
To change the size of the Toast, specify the height and width options.
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 option.
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 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.