CODEWITHSUNDEEP
jqueryjquery-ui
user1184100
user1184100

Reputation: 6894

custom placement of buttons in dialog box - jquery ui

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");
        }
    }

    });
});

Upvotes: 4

Views: 21681

Answers (4)

edilecachan
edilecachan

Reputation: 1

If you have three buttons and you want that they are distributed well on 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 carefull, as someone said before, important is important

Enjoy,

Upvotes: 0

lwin
lwin

Reputation: 4460

You can change style of button within button tag.

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

This style is also work with multiple dialog.Good Luck.

Upvotes: 1

Kris
Kris

Reputation: 565

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.

Upvotes: 2

Didier Ghys
Didier Ghys

Reputation: 30666

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

Upvotes: 10

Related Questions