Custom button layout in dialog box - jquery ui

Question

I wanted to move the buttons added to my dialog box up or down, how can I do this, I use jquery ui. When ok is added, it appears on the far right end, if it can be placed around?

$(function() { $("#dialog-message").dialog({ modal : true, resizable : false, buttons : { ok:function() { $(this).dialog("close"); } } }); }); 

Answer 1

To place the buttons left / center / right, turn off the floating button and adjust the text-align property accordingly:

 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; } .ui-dialog .ui-dialog-buttonpane { text-align: center; /* left/center/right */ } 

Demo

---

This is the markup for the buttons:

 <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <div class="ui-dialog-buttonset"> <!-- the buttons are here --> </div> </div> 

By default, css indicates:

• text-align: left; for the element .ui-dialog-buttonpane
• float:right for .ui-dialog-buttonset

Answer 2

Although the above answer is great, it applies to all buttons. The following is an example of a modal dialog that can position each button separately and can also be individual.

  $("#divModelPopup").dialog({ closeOnEscape: false, width: 500, minWidth: 500, minHeight: 400, modal: true, open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }, title: "Terms & Conditions", buttons: { "I Decline": { click: function () { $(".lnkLogout").click(); }, text: "I Decline", class: "btnDlgDecline" }, "I Accept": { click: function () { $(this).dialog("close"); // Update user details as accepted $.ajax({ .... Ajax call }); }, text: "I Accept", class: "btnDlgAccept" }, "Print": function () { $("#divModelPopupPrintArea").printArea(options); } }, resize: function (event, ui) { $("#divModelPopupScroll").height(ui.size.height / 1.27); } }); 

And then in CSS,

 .btnDlgDecline{ position: absolute; left: 10px; color: red !important; } .btnDlgAccept{ color: green !important; } 

Hope this helps.

Answer 3

You can change the button style in the button tag.

  Ok:{ style:"margin-right:640px", click: function () { //do something } }, 

This style also works with several dialogs. Good luck.

Answer 4

If you have three buttons and want them to fit well along the line, try:

 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; } .ui-dialog .ui-dialog-buttonpane { text-align: center; /* left/center/right */ } .ui-button { margin-left: 5% !important; margin-right: 5% !important; } 

Be careful, as someone said before, important is important

Enjoy,