I tried the target opt in sweetalert2, but the toast still appear outside the target
what im doing wrong?
here's the code
#trial {
position: absolute;
display: block;
height:200px;
width: 500px;
border: 1px solid;
}
<div id="trial"></div>
<script>
$(document).ready(function() {
var id = document.getElementById('trial');
Swal.fire({
title: 'I will be placed inside the #swal2-container',
toast: true,
target: id,
position: 'bottom-left'
});
});
</script>
Here the result:
With the target
attribute, all that happens is that the DOM container .swal2-container
is appended to the target element, but it has a position: fixed;
style and you will need to override it as below:
$(document).ready(function() {
var id = document.getElementById('trial');
Swal.fire({
title: 'I will be placed inside the #swal2-container',
toast: true,
target: id,
position: 'bottom-left'
});
});
#trial {
position: relative;
left: 50px;
display: block;
height: 200px;
width: 500px;
border: 1px solid;
}
.swal2-container{
position: absolute !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<div id="trial"></div>