Closed alexwhb closed 1 year ago
After more investigation... It might actually be an issue on the Jetbrains side... if I do
Box(ref = ref {console.log(it.getBoundingClientRect()) })
That will output the correct X, left, right values... so it seems that in order to get correct x, left, right values... you need your HTML element to not contain any children strangely.
I figured it out... you have to use ref later... probably ref happens before the DOM is actually rendered, which makes the results unpredictable if you just getBoundingClientRect() inside ref {} 🙌, so instead I store that ref and call getBoundingClientRect() later.
I love coming in just after the person already figured it out :)
Yeah I was going to suggest postponing the ref calculation. You can do this as you did, by storing the ref, or within the ref, you can try calling window.invokeLater { ... }
(an extension method provided by Kobweb) or window.setTimeout(0) { ... }
if you prefer.
@bitspittle awesome! Thank for for these additional tips! This is great!
When I use ref on a Box and try accessing element.getBoundingClientRect() it gives me the proper width and height to the element, but incorrect x, y, left, right... etc values. I tested the same thing with a Div to make sure it wasn't an issue with the jetbrains compose side, and that worked as expected, so I'm thinking maybe it has something to do with the caching system or something on the kobweb/silk side?
Here's a sample of the code I'm working with:
Issue code:
code in context: