Back to Recipe Gallery

Toast with a Custom Target

In order to place the toast inside another block (e.g. div) the target property can be used. Note that in order for the realtive positioning to work, the following conditions needs to be met:

1. SweetAlert2 container needs to have a position: absolute. This can be achieved applying a custom class to the swal container using the customClass.Container properties

2. The containing target needs to have a position value other than static (i.e. fixed, absolute, relative, or sticky).

For more information about the reason why these two conditions needs to be met, consult the following pages:

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block