Vaadin Dialog拖动时初始下沉问题的解决方法

针对Vaadin 23.3.6版本中，同时启用Draggable和Resizable的Dialog在拖动初始阶段出现下沉后恢复的问题，可通过以下几种方式解决：

• 先添加内容再打开Dialog
  空Dialog初始化时尺寸计算易出现偏差，先填充内容能让Vaadin正确计算初始定位：

  Dialog dialog = new Dialog();
  // 先添加任意内容（即使是占位元素）
  dialog.add(new Span(" "));
  dialog.setDraggable(true);
  dialog.setResizable(true);
  dialog.open();
  

• 强制触发Overlay重绘
  如果需要空Dialog打开，可在打开后延迟触发resize通知，修正定位偏移：

  Dialog dialog = new Dialog();
  dialog.setDraggable(true);
  dialog.setResizable(true);
  dialog.open();
  
  UI.getCurrent().accessLater(() -> {
      dialog.getElement().executeJs("this.$.overlay.notifyResize()");
  });
  

• 自定义CSS修正初始定位
  通过CSS覆盖Dialog Overlay的默认对齐规则，避免初始计算偏差：

  vaadin-dialog-overlay {
      align-items: flex-start !important;
      justify-content: flex-start !important;
  }
  

  将上述CSS添加到项目全局样式文件（如styles.css）即可生效。

该问题属于Vaadin 23.x版本的已知UI渲染bug，上述方法可在当前版本（23.3.6）中有效规避。

内容的提问来源于stack exchange，提问作者Utkarsh Kanodia