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

Question

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.

Answer 1

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.