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?
Syntax: $( ". selector" ). dialog({ position: { my: "left top", at: "left bottom", of: button } });
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.
dialog( { ... } ); Then check for the class when needed: if ($("selector"). hasClass("initialized")) { ... }
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With