Confirm Dialog Draggable

Hi, is there a way to make the confirm dialog draggable or move the position vom center / center to another location? In my app the confirmation for payment ist on top of the price so i would like to adjust the location or make it draggable.

Doesn’t seem like Confirm dialog has API for making it draggable. You might want to consider Extending the Dialog component (which can be dragged) and making it behave like a ConfirmDialog.

No ‘native’ support for specifying the position as well, but it could be adjusted with some JavaScript call (.executeJs(..)) . I know I’ve done it for a dialog, but haven’t tried it for a confirm dialog. I’ll try it out and let you know.

Also feel free to create a GitHub issue as a feature request:

Actually, never-mind that executeJs note, as that was for a very specific use case. It’s fairly simple to adjust the position.

  1. Add a classname to the confirm dialog
    private ConfirmDialog createSimpleConfirmDialog() {
        var confirmDialog = new ConfirmDialog();

        return confirmDialog;
  1. Add CSS to style / position it.
vaadin-confirm-dialog-overlay.position-top {
    top: 10px;
    bottom: auto;

This is positions the confirm dialog close to the top of the screen.
This is example is for Vaadin 24.

You might also want to consider, mentioning the price in the Confirm dialog as well.

Thanks a lot this works for me.