Add API to set position to a dialog and sync values on user interaction

[DiegoCardoso]

After (https://github.com/vaadin/vaadin-dialog/issues/145), flow component should add API to allow setting the overlay position.

Also, the component should sync the position value, at least in two cases:

• setDraggable is set to true and a dialog is dragged by the user
• setResizable is set to true and a dialog is resized by the user (the reason is that when a resize happens, the dialog defines the top/left position).

[web-padawan]

See also vaadin/vaadin-dialog-flow#138 for a feature request for similar API that also includes an example code.

[mlopezFC]

If there is someone who cannot wait until the "set a specific position for a dialog" feature is released, here is a workaround:

@Route
@PWA(name = "My Application", shortName = "My Application")
@CssImport(value = "./styles/custom-styles.css", id = "custom-dialog-styles", themeFor = "vaadin-*-overlay")
public class MainView extends VerticalLayout {

    public MainView() {
    	Dialog d = new Dialog(new TextField("Text field", "Text Field"));
    	d.getElement().setAttribute("theme", "dialog-top-left");
    	
        Button button = new Button("Click me",
                event ->  {
                	d.open();
        });
        add(button);
    }
}

And custom-styles.css:

:host([theme~="dialog-top-left"]) [part~="overlay"]
{
    align-self: flex-start;
    position: absolute;
    top: 0px;
    left: 0px;
}

[SebastianKuehnau]

Another workaround could be

getElement().executeJs("this.$.overlay.$.overlay.style[$0]=$1", "align-self", "flex-start");
getElement().executeJs("this.$.overlay.$.overlay.style[$0]=$1", "position", "absolute");
getElement().executeJs("this.$.overlay.$.overlay.style[$0]=$1", "left", "<your x value in pixel>");
getElement().executeJs("this.$.overlay.$.overlay.style[$0]=$1", "top", <your y value in pixel>);

to change the position directly.

[AndrasJanurik]

@SebastianKuehnau Thanks, nice workaround!

Do you have an idea for a getter as well?
I tried this:

getElement().executeJs("return this.$.overlay.$.overlay.style['left']");

but since executeJs runs in a separate thread and returns only a PendingJavaScriptResult the result value cannot simply be returned from a getter.

[SebastianKuehnau]

please try this:

public void getPosition(SerializableConsumer<Position> consumer) {
  getElement().executeJs("return [this.$.overlay.$.overlay.style['top'], this.$.overlay.$.overlay.style['left']]")
    .then(String.class, s -> {
          String[] split = StringUtils.split(s, ',');
          if (split.length == 2 && split[0] != null && split[1] != null) {
              Position position = new Position(split[0], split[1]);
              consumer.accept(position);
          }
    });
}

[HHA-Abacus]

Even if the workaround can help, this feature would be much more comfortable to use with an API.
Looking forward :)

[simasch]

What is the state of this issue? When will Dialog positioning be possible?

[scrmtrey91]

Any news ? Need for vaadin 23+.