Select to view content in your preferred language

Calcite-dialog resizable/drag-enabled: persist position and size

199
0
05-06-2025 11:31 PM
Labels (1)
FC_Basson
MVP Alum

How can the position and size of a calcite-dialog component with resizable and drag-enabled be persisted after closing and opening the dialog?  Currently, the dialog can be moved, but after closing and opening it, the dialog returns to the position and size set by the placement and width properties.

For now I am using a ResizeObserver to watch for size changes of the <div class="dialog"> element in the shadowroot, storing the width and height before closing the dialog, and then applying the style to the dialog after it opens again - this works.  I'm also using a MutationObserver to do the same for the position, which works to position the dialog after reopening, but as soon as you drag the dialog, it jumps back to the placement position (the transform: translate CSS property is basically reset).

0 Kudos
0 Replies