jQuery UI Dialog button positioning

Question

How can I position buttons from jQuery UI separately from each other. Buttons are aligned in same direction. I would like one button to be aligned to left while the other to the right. Is it possible?

Answer 1

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.

Answer 2

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>

Answer 3

I wound up with the following solution (based on the answer by The Cook). This has a number of advantages (for me) over the other answers:

• Pure HTML/CSS - no javascript
• No need to set a fixed width on the dialog (button will always align to the left edge, even if the user resizes the dialog)
• No need for the !important flag in the CSS

The HTML I used (Slightly modified from the answer by The Cook):

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

Then I used the following CSS:

.leftButton
{
    position: absolute;
    left:8px;
}

With the result that the "leftButton" button is always fixed at 8px off the left edge of the dialog, while the other buttons are right justified. If you have more than one button you need left justified, then you would need to increase the left parameter by the width of the previous buttons plus whatever spacing you want for each button, which is less than elegant in my opinion. However, for a single left-justified button this works like a charm.

Answer 4

You'd first have to change width of .ui-dialog-buttonset to 100% in jquery-ui.css

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { width: 100%;}

Then in your modal declaration, for buttons, you could do something explicit like below:

buttons: [
        {
           text: "Close",
           open: function(){
                        $(this).css('float','left');}, 
                  }
        }
             ]

Answer 5

you could also add class to your dialog (http://docs.jquery.com/UI/Dialog#option-dialogClass) to localize your styling.

Answer 6

Ok,As @The Cook's answer,you can change this css in style tag.Think by another way.you can add style within button,no need css anymore.Good Luck.

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

Answer 7

I found the .ui-dialog-buttonset collapses down with no width anyway so to position two bottons in the bottom left and right corner added just css like this:

.ui-dialog-buttonset {width:100%}
.ui-dialog-buttonset .ui-button:last-child {float:right !important;}

The first line make the button set container 100% wide, the second one pushes the last button found to the right.

Answer 8

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none !important;
  text-align:right;
}

.ui-button-left {
  float: left;
}

This does not impact the default buttons, they will appear to the right. Also, you can place as many buttons on the left as you want without special formatting for each button. To set the class of the left buttons, there are many ways to do that.

As part of the dialog definition:

$("#mydialog").dialog(
    {buttons: [
        {"class": "ui-button-left", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

Or you can do something like this:

$("#mydialog").dialog(
    {buttons: [
        {"id": "myDeleteButton", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

And later style the css for the 'myDeleteButton' object as floating left. Setting the button id can be helpful if you also want to show or hide the button without recreating the dialog.

Tested in Chrome, Safari, FF, IE11, jQuery UI 1.10

Answer 9

I got the same problem but I found the easy solution that we change order of buttons Ok or close of form dialog whenever we make the definition jquery ui dialog form.

Answer 10

After select, try:
.prependTo(".ui-dialog-buttonpane");

Answer 11

$('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    text  : 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                space: { 
                    text  : '',
                    id : 'space',
                    width : '(the distance you want!)',
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });
$("#space").visibility("hidden");

Answer 12

I use the following approach to left align only the first button. This works for any dialog width:

    open: function(event, ui) {
        var firstButton = $(this).parent().find('.ui-dialog-buttonpane button:first')
        var firstButtonPos = firstButton.position().left - 15;
        firstButton.css({ marginRight: firstButtonPos + 'px', color: 'red' });
    },

Answer 13

All I did was add the following to the CSS to center the buttons. The key here is setting the width to 100%, bc checking with firebug, the width was only size of the buttons.

.ui-dialog-buttonset {
    width: 100%; 
    text-align: center
}