Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 736
turezky Avatar asked Jun 06 '09 22:06

turezky


People also ask

How to set position of dialog box in JQuery?

Syntax: $( ". selector" ). dialog({ position: { my: "left top", at: "left bottom", of: button } });

What is JQuery ui dialog?

The jQuery UI dialog method is used to create a basic dialog window which is positioned into the viewport and protected from page content. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.

How do you check if JQuery dialog is initialized?

dialog( { ... } ); Then check for the class when needed: if ($("selector"). hasClass("initialized")) { ... }


2 Answers

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.

like image 132
Chris Brandsma Avatar answered Sep 22 '22 12:09

Chris Brandsma


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> 
like image 44
The Cook Avatar answered Sep 25 '22 12:09

The Cook