jQuery Forum

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.

1. /**
   * 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:

1. $('#dialogElementSelector').orderDialogButtons();

This function should be called when all buttons have already been inserted into the DOM.