how do i get the height of an element post-render?

[ghost]

this is the general idea of how you do it in solidjs,

const [ref, setRef] = createSignal()

return <div ref={setRef} style={ref() && { left: `${position() * ref().offsetWidth - adjustment}px` }} />

but it doesn't seem to work w/ leptos (the log returns 0.0 so it must be being called pre-render)

let elem_ref = NodeRef::new(cx);

let vw = view! {cx,
    <div _ref=elem_ref>
        <div style="height: 10px" />
    </div>
};

create_effect(cx, move |_| {
    console_log(&format!("{:?}", elem_ref.get().unwrap().get_bounding_client_rect().height()));
});

vw

i also tried wrapping NodeRef with a signal, but then i can't use it in _ref=, im assuming bc it doesnt seem i'm able to access a mutable form of the NodeRef

is there some way to delay execution of the create_effect (or similar function) until after the element has been rendered to DOM?

[gbj]

Yeah the NodeRef is filled on element creation, not on mounting to the DOM.

It might be a little hacky but how about something like this, using request_animation_frame to delay until it's mounted. (I haven't tried this to see if it actually works.)

let elem_ref = NodeRef::new(cx);

create_effect(cx, move |_| {
    if let Some(elem) = elem_ref.get() {
       request_animation_frame(move || {
           console_log(&format!("{:?}", elem.get_bounding_client_rect().height()));
       });
    }
});

view! {cx,
    <div _ref=elem_ref>
        <div height=10 width=3 />
    </div>
}

[ghost]

yep this works :)

thanks!