# Calculate rendered height using expressions and store it **URL:** \ **Category:** How-to Discussions\ **Created:** [March 7, 2017, 12:35pm UTC](https://forums.fusetools.com/t/calculate-rendered-height-using-expressions-and-store-it/6849 "2017-03-07T12:35:05Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Christer\_V\_Aas](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/christer_v_aas/32/62_2.png) [@Christer\_V\_Aas](https://forums.fusetools.com/u/Christer_V_Aas)\ **Post date:** [March 7, 2017, 12:35pm UTC](https://forums.fusetools.com/t/calculate-rendered-height-using-expressions-and-store-it/6849/1 "2017-03-07T12:35:05Z")
I am trying to generate each items height and store it. Is that possible using expressions? When writing this the height to a text output in UX it only runs the expression once the height is changed. `` Is there a way to run the expression when rendered, and if so then store it to an observable? ---
**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\ **Post date:** [March 7, 2017, 12:41pm UTC](https://forums.fusetools.com/t/calculate-rendered-height-using-expressions-and-store-it/6849/2 "2017-03-07T12:41:52Z")
In theory that might work, but it’s kind of indirect. You can instead use the `Placed` event, like `Placed="{onPlaced}"` on the nodes. [https://www.fusetools.com/docs/fuse/elements/element/placed](https://www.fusetools.com/docs/fuse/elements/element/placed) But as noted on that page, we really discourage using this. What use-case are you tring to implement? ---
**Author:** ![Christer\_V\_Aas](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/christer_v_aas/32/62_2.png) [@Christer\_V\_Aas](https://forums.fusetools.com/u/Christer_V_Aas)\ **Post date:** [March 7, 2017, 12:49pm UTC](https://forums.fusetools.com/t/calculate-rendered-height-using-expressions-and-store-it/6849/3 "2017-03-07T12:49:44Z")
I’m trying to make this [https://www.fusetools.com/examples/material-transition](https://www.fusetools.com/examples/material-transition) but with variable card height - not static as in the sample. Once I remove the card to a new layout master outside the list I expand it to contain a long list. This is reflected to the original list (original master) and the expanded card is reflected in the original list pushing elements far down. That screws with animations going back and setting the card back to original master and removing the long list it contains. Both the card and the list then animates. ---
**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\ **Post date:** [March 7, 2017, 1:18pm UTC](https://forums.fusetools.com/t/calculate-rendered-height-using-expressions-and-store-it/6849/4 "2017-03-07T13:18:27Z")
There shouldn’t be a need to have the cards static in height. There’s nothing fundamentally limiting such transitions to working with variable height content. I haven’t looked too closely at that example, but I hope it’s only something minor that stops it from working that way. Attempting to do this with JS will most likely fail, due to the timings of the events. Doing this strictly in UX isn’t easy. You may have to look at things like `TransitionLayout` to fake transitions between unrelated elements. This doesn’t involve `LayoutMaster` and is quite flexible, albeit not easy to setup. ---
**Author:** ![Christer\_V\_Aas](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/christer_v_aas/32/62_2.png) [@Christer\_V\_Aas](https://forums.fusetools.com/u/Christer_V_Aas)\ **Post date:** [March 7, 2017, 1:23pm UTC](https://forums.fusetools.com/t/calculate-rendered-height-using-expressions-and-store-it/6849/5 "2017-03-07T13:23:26Z")
Well I actually got working with a combination of UX and Javascript using Placed. I do this: `` Then in Javascript I do this: `function onPlaced(e) { if(e.data.cardHeight.value === undefined) { e.data.cardHeight.value = e.height; } }` Where the e.data.cardHeight is an Observable for each card. The timing works because I just let it render, then placed is called and I can save the rendered cardHeight. Then the height is static from that point on. ---
**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\ **Post date:** [March 7, 2017, 1:42pm UTC](https://forums.fusetools.com/t/calculate-rendered-height-using-expressions-and-store-it/6849/6 "2017-03-07T13:42:38Z")
`onPlaced` can be called multiple times, and might have different sizes, if the content changes of the user rotates the screen, opens the keyboard, navigates, etc. It could in theory work, but I just don’t like thinking about the possible situations where the size changes or some JS\<\<-\>Uno message is delayed. Nothing will fail terribly, but it might result in flicker as an element flips between two sizes. The ImageView sample does full-screen transitions from arbitrary element sizes. [https://github.com/fusetools/fuse-samples/tree/master/Samples/ImageViewer](https://github.com/fusetools/fuse-samples/tree/master/Samples/ImageViewer)