jQuery UI Dialog button positioning

This is the way that I was able to accomplish the results.

 $('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    class: 'leftButton',
                    text: 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });

Then in Styles add the !important flag, which is needed because the class comes first and is overwritten by jquery.

<style>
    .leftButton
    {
        margin-right: 170px !important;
    }
</style>

OK, looking at this through Firebug...

The Dialog control create a div with a class called ui-dialog-buttonpane, so you can search for that.

If you are dealing with multiple buttons, you will probably want :first and :last attributes.

So, $(".ui-dialog-buttonpane button:first) should get you the first button. and $(".ui-dialog-buttonpane button:last) should get you the last button.

From there you can modify the css/style to put each button on the right and left (modify the float values).

Anyway, that is how I would approach it right now.