Confirm dialog-Align button to the left.

Vaadin’s confirm dialog box is quite useful, but can we move the buttons to the left. Buttons always sit on the right…

You could use CSS, but ConfirmDialog’s implementation doesn’t make that very easy (HorizontalLayout with an empty Label to create alignment; no style names on the components). There just doesn’t seem to be an easy or robust way to do that with ConfirmDialog. You might want to vote for it in its issue tracker. There’s a link to that on the
ConfirmDialog add-on page.

Thank you. I got it fixed.

The parent of the buttons is horizontal layout which has three components. 1. Empty label. 2. Cancel Button, 3. Ok button. The buttons can be aligned to left (changing the default alignment of right) by removing the empty label from the horizontal layout.

//Method that can be called to get the customized confirmation window
public ConfirmDialog getConfirmDialog(){

// Customization via the factory. This makes all subsequent dialog
// calls to use this application-wide.

/*----------- Create the confirm window ------------- */
ConfirmDialog.Factory dialogFactory = new DefaultConfirmDialogFactory() ;
ConfirmDialog confirmDialog=dialogFactory.create(caption, message, okCaption, cancelCaption);
confirmDialog.setModal(true);

/------------ Find the buttons and change the order --------------/
Button okButton = confirmDialog.getOkButton();
okButton.addStyleName(“gray”);
//ok.getParent().setWidth(30,Sizeable.UNITS_PERCENTAGE);
Button cancel = confirmDialog.getCancelButton();

HorizontalLayout buttons = (HorizontalLayout) okButton.getParent();
buttons.setSpacing(true);

//Removing the empty label from the horizontal layout of the buttons. Removing this empty label pushes the buttons to the left
buttons.removeComponent(buttons.getComponent(0));
buttons.removeComponent(okButton);

//Change the order of the buttons. Default is Cancel comes first and then Ok( ex : No, Yes).
//Now adding the ok button first and then cancel button.
buttons.addComponent(okButton, 0);
buttons.addComponent(cancel,1);

buttons.setWidth(33,Sizeable.UNITS_PERCENTAGE);

ConfirmDialog.setFactory(dialogFactory);
return confirmDialog;