Order UI Dialog buttons (enhancement request)
Problem:
UI Dialog buttons order depends on CSS theme settings, and when button style sets "float:right" buttons line up in reverse order.
Solution:
Wrap all buttons in a <div style="float:right"> (or whatever float type is defined for buttons) and set "float:left" for the buttons themselves. Unfortunately, this may require changing not only UI Dialog code, but UI CSS framework as well. Until it is done, here is a patch which can be applied on the fly to any existing dialog.
- /**
* Make dialog buttons appear in the order they are defined regardless of CSS theme settings.
* @return jQuery object for chaining
*/
jQuery.fn.orderDialogButtons = function() {
var $buttonPane=this.next();
var $buttons=$buttonPane.children();
$('<div style="float:'+$buttons.css('float')+'">').appendTo($buttonPane).append($buttons);
$buttons.css('float','left');
return this;
};
Usage:
- $('#dialogElementSelector').orderDialogButtons();
This function should be called when all buttons have already been inserted into the DOM.