10

In bootbox.js, by default Ok button showing after Cancel button. I want it to be first and then cancel. Here is the situation of current scenario,

http://paynedigital.com/img/confirm-simple.png

I need Ok button first. I have scene its documentation but didn't find a way to do it.

Maha Dev
  • 3,915
  • 2
  • 31
  • 50
  • 1
    you mean we couldn't do it by this plugin? – Maha Dev May 02 '16 at 04:25
  • well..I have not worked with bootbox js yet..so can't say..;( – Kartikeya Khosla May 02 '16 at 04:26
  • 1
    if possible create a fiddle. – Kartikeya Khosla May 02 '16 at 04:29
  • 1
    This is actually a very good and valid question. Most dialogs I've seen so far have the confirm buttom as the first button. On Windows this is the default for every dialog. Most Linux system have it on the left afaict. Only Mac OS has it the other way around. TL;DR: Since the default doesn't seem to be the default for the rest of the world, there really should be and easy and *built-in* way to change this. – Semmel Mar 16 '17 at 00:58

6 Answers6

9

You can change order of the buttons. Try:

 bootbox.confirm({
     title: "danger - danger - danger",
     message: "Are you sure of this?",
     buttons: {
        cancel: {
        label: "Cancel",
        className: "btn-default pull-right"
     },
     confirm: {
        label: "Delete",
        className: "btn-danger pull-left"
    }
  },
  callback: function(result) {
    // Do your stuff here
  }
});

Hope this works for you.

khushboo29
  • 906
  • 6
  • 16
  • 2
    I've tried this and while it changes the order of the buttons it also pulls the first button completely to the left. So for me the CSS solution does the trick much better and does exactly what I want. – Semmel Mar 16 '17 at 01:04
  • This is an exact solution, but still you can modify it. – Ananda G Aug 30 '17 at 09:57
7

In the meantime, the Bootbox team has added a new option called swapButtonOrder that you have to switch to true to do it easily.

Check my working demo with Bootbox v5 here : http://jsfiddle.net/2z8tb6fk/1/

b126
  • 544
  • 4
  • 11
6

You can do it by CSS.

.modal-footer button {
  float:right;
  margin-left: 10px;
}

Here is working fiddle http://jsfiddle.net/9L3A9/51/

Ankush Jain
  • 5,654
  • 4
  • 32
  • 57
  • We can also achieve this by creating custom buttons but why i do if i just need just two button. Thanks :) – Maha Dev May 04 '16 at 11:17
  • This solved the problem perfectly and just changed the order of the buttons. Thanks. :) – Semmel Mar 16 '17 at 01:02
1

I've faced same necessity. I have solved this way. I have taken a class for making difference of 10 pixel between the buttons. 

<style>
    .margin-left-10px {
        margin-left: 10px;
    }
</style>

Then I have used bootstrap class to the button, and it's working perfectly.

<script>
    buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-danger'
            },
            cancel: {
                label: 'No',
                className: 'btn-success pull-right  margin-left-10px'
            }
    }
</script>

Here my no button will be appeared in the right forever.

Ananda G
  • 2,389
  • 23
  • 39
0

I spend one hour having a look at this issue, then I changed bootbox.js file.

Before the enumeration of the buttons I added : 

    var list = Object.keys(buttons).map(
    function (key) {
        return buttons[key];
    });

    buttons = list.sort(function (a, b) {
        return b.order -a.order ;
    });

Then you can set an order for your buttons.

Ouf!

Thomas
  • 5,603
  • 5
  • 32
  • 48
0

I changed the order in the javascript

exports.confirm = function () {
    var options;

    // changed the order of the buttons
    //options = mergeDialogOptions("confirm", ["cancel", "confirm"], ["message", "callback"], arguments);
    options = mergeDialogOptions("confirm", ["confirm", "cancel"], ["message", "callback"], arguments);
nuander
  • 1,319
  • 1
  • 19
  • 33