How to increase horizontal space between buttons in jquery user interface dialog?

Question

I am using jquery ui dialog and I wanted to see if there is a way to enable horizontal space between buttons in a dialog box? I do not see anything in the documentation or from Google.

Answer 1

The best way to add style to your buttons. In particular, margin-rightor margin-leftvalues:

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 .

margin-left, margin-right, .

, id , .

Answer 2

, jQuery . javascript, CSS:

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

(:Not IE6/7, )

Answer 3

..

• 1, 2: , Dave A BabyAzerty

• 3:

  your.css

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

• 4:

  Javascript

  // dialogClass, :)
  $ ( "#dialog" ).dialog({dialogClass: "my-style" });

  your.css

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