How to increase the horizontal space between buttons on jquery UI dialog?

javascript, jquery, jquery-ui-dialog, uibutton

Solution

The best way is adding styling to your buttons. Specifically, `margin-right`, or `margin-left` values:

buttons: [
    { text: "Save", click: function () { alert("save"); }, style:"margin-right:40px;" },
    { text: "Cancel", click: function () { alert("close"); ;}, style:"margin-left:0px;" }
]

feel free to play with this fiddle.

The more you increase either `margin-left` or `margin-right`, the more separated the buttons will be horizontally.

alternatively, you can also create classesbut in this case, id lean toward in-line styling because this is such a localized use.

Problem

I am using jquery ui dialog and I wanted to see if there was any way to include the horizontal space in between buttons on the dialog? I Can't see anything in the documentation or from googling.

Original source