How can I measure the size of an element with Compose HTML?

# compose-web

[CLOVIS]

How can I measure the size of an element with Compose HTML?

[Daniel Weidensdörfer]

I would try to figure out how to measure elements in pure html and then replicate it with compose dsl

[CLOVIS]

There is getBoundingRect on pure HTML elements. Compose HTML lets you access the ref, but:
• When ref {} is called, the element is not yet in the DOM, so the size is unknown.
• When ref.dispose {} is called, the element has already been removed from the DOM, so the size is unknown.

[David Herman]

For elements added to the DOM, you can use a mutation observer to get access to elements after they're added. Otherwise, I am not 100% sure but I bet if you use a setTimeout without a timeout value (so, basically, load a callback to get executed at the end of the current event pipeline), it will probably be in the DOM at that point?

ref { rawElement ->
   setTimeout({
     // rawElement should be in the DOM at this point?
   })
}

Maybe also try a pattern like:

var rawElement by remember { mutableStateOf<HTMLElement?>(null }
Div(attrs = {
   ref { e ->
     rawElement = e as HTMLElement
   }
}

if (rawElement != null) {
  // rawElement should be in the DOM at this point?
}