Change title position in sweetalert popup and make inactive button sweetalert2

Question

I have a sweetlalert popup like this below

Swal.fire({
        icon: "warning",
        title: 'By deleting this thing, you will delete all data related',
        text: "Are you sure you want to delete this  ?",
        input: 'checkbox',
        inputPlaceholder: 'I understand the consequenses',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
        reverseButtons: true
    }).then(function(result){

    })

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

Right now, the text position is before the checkbox.

I want to ask, how can I change the position so the text and button confirm in sweetalert position is after the checkbox and inactive, then after checkbox is checked, the text and button is become active ?

Thank you

Answer 1

you can achieve this by adding 3 css style rules in order to:

• change the check-box position (via flex-flow:row-reverse)
• the interaction/opacity
• and the row order (via flex-direction:column-reverse)

CSS:

.swal2-checkbox {
  /* change the checkbox position */
  flex-flow: row-reverse;
}

.swal2-actions {
  pointer-events: none;
  opacity: 0.4
}

.swal2-content {
  /* change the row order */
  flex-direction: column-reverse;
  display: flex;
}

in your javascript you need to create a onclick event, which detects that the checkbox was clicked:

document.getElementById('swal2-checkbox').onclick=function(e){
  sel= document.querySelector(".swal2-actions")
  sel.style.pointerEvents='all'
  sel.style.opacity=1
}

Swal.fire({
        icon: "warning",
        title: 'By deleting this thing, you will delete all data related',
        text: "Are you sure you want to delete this  ?",
        input: 'checkbox',
        inputPlaceholder: 'I understand the consequenses',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
        reverseButtons: true
    }).then(function(result){

    })
    
document.getElementById('swal2-checkbox').onclick=function(e){
  sel = document.querySelector(".swal2-actions")
  sel.style.pointerEvents='all'
  sel.style.opacity=1
}

.swal2-checkbox {
  flex-flow: row-reverse;
}

.swal2-actions {
  pointer-events: none;
  opacity: 0.4
}

.swal2-content {
  flex-direction: column-reverse;
  display: flex;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

note: here is a very helpful "cheatsheet" about CSS flexbox and here another graphical guide to flexbox