custom placement of buttons in dialog box - jquery ui

Question

I wanted to move the buttons added to my dialog box to either top or left how can this be done i'm using jquery ui. When ok is added it shows up at extreme right end can this 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 aligned, disable the floating 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>

The default css specifies:

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

Answer 2

Though the above answer is great, it applies to all the buttons. Below example is a modal dialog which can position each button separately and can style individually as well.

        $("#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 it helps.