Sweetalert: Button Position

[GabrielSt]

Is there any way to change position of confirm and cancel buttons?

[gremz]

Currently there isn't a way via configuration. You could rearrange a bit through CSS. The downsides are possible breakage when you update, and possible clutter of css trying to cover all breakpoints.

[xiaody]

The overwriting CSS could be like

.sa-button-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
}
.sa-button-container .cancel {
    -webkit-order: 2;
            order: 2;
}
.sa-button-container .sa-confirm-button-container {
    -webkit-order: 1;
            order: 1;
}

[hraynaud]

@gremz @t4t5 I had the same issue. I looked in the source to see if I customize but couldn't find a non hacky way to custom the plugin itself. So I settled for a hacky way in my own code :-) If you are using jquery something like this works fine.

function swapModalButtons(){
  $("button.cancel").before($("button.confirm"))
}

[ghost]

src:modules/injected-html.js line:53 u will see what u want, that's why u can't set it's order.
modify:sweetalert.min.js
find Cancel, remove it's position, it's work.

[ryanmortier]

You guys should be using this fork by now: https://limonte.github.io/sweetalert2/

It's actually updated and it has a reverse button option.

[michaelcashe]

@ryanmortier I'm on a big project and I would have to go through a lot of red tape to use sweetalert2
@ghost I've edited the injected-html.js and changed the order... I've attempted to change sweetalert.min.js. That's a pretty messy job. I can't tell if I did it correctly or not. The buttons still haven't reversed. What's the best way to edit a min file?

[t4t5]

This can now be done in 2.0 using:

swal({ 
  buttons: { 
    confirm: true, 
    cancel: true,
  }
})

...to set the exact order!

[limonte]

You guys should be using this fork by now: https://limonte.github.io/sweetalert2/

this link is outdated, here's the correct one https://sweetalert2.github.io/