javascripthtmlcsssweetalertsweetalert2

sweetaler2 target opt - swal still outside the target


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:

enter image description here


Solution

  • 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>