CODEWITHSUNDEEP
jqueryjquery-uimodal-dialog
turezky
turezky

Reputation: 856

jQuery UI Dialog button positioning

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?

Upvotes: 31

Views: 66764

Answers (13)

Cenote
Cenote

Reputation: 1

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
}

Upvotes: 0

Peter Thoeny
Peter Thoeny

Reputation: 7616

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' });
    },

Upvotes: 0

lwin
lwin

Reputation: 4460

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 
                            }
                        },

Upvotes: 2

spekary
spekary

Reputation: 438

.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

Upvotes: 1

ibrewster
ibrewster

Reputation: 3612

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.

Upvotes: 13

user2653803
user2653803

Reputation: 1

$('#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");

Upvotes: 0

Angad
Angad

Reputation: 3429

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');}, 
                  }
        }
             ]

Upvotes: 4

Shaun
Shaun

Reputation: 11

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.

Upvotes: 1

The Cook
The Cook

Reputation: 189

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>

Upvotes: 18

Falci
Falci

Reputation: 1873

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

Upvotes: 1

nvtthang
nvtthang

Reputation: 604

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.

Upvotes: 1

Chris Brandsma
Chris Brandsma

Reputation: 11736

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.

Upvotes: 30

pashcan
pashcan

Reputation: 41

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

Upvotes: 4

Related Questions