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.

Answer 2

Very simply use the class markup that jQuery UI offers you. No need to tweak anything with javascript, just use plain CSS :

.ui-dialog-buttonset button:not(:first-child) {
    margin-left: 20px;
}

(:Not selector doesn't work in IE6/7, but with all other browsers it works fine)

Answer 3

Depends..

1. Solution 1 , 2: as Dave A and BabyAzerty stated above

2. Solution 3: If it is only one modal and same across everything

   your.css

   .ui-button {
       margin-left: 10px !important;
   }
   

3. Solution 4: if you have got more modals

   javascript

   // call your dialog with dialogClass option and then you can play with anything :)
   $( "#dialog" ).dialog({ dialogClass: "my-style" });

   your.css

   .my-style .ui-button { margin-left: 10px !important; }