# Retain element size when show.bind hides it

**URL:** <https://discourse.aurelia.io/t/retain-element-size-when-show-bind-hides-it/1111>\
**Category:** Help Requests\
**Created:** [April 20, 2018, 10:07am UTC](https://discourse.aurelia.io/t/retain-element-size-when-show-bind-hides-it/1111 "2018-04-20T10:07:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tankBug](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tankbug/32/2023_2.png) [@tankBug](https://discourse.aurelia.io/u/tankBug)\
**Post date:** [April 20, 2018, 10:07am UTC](https://discourse.aurelia.io/t/retain-element-size-when-show-bind-hides-it/1111/1 "2018-04-20T10:07:35Z")

</div>

Hi there!  
I’m new to aurelia, so this might be a bit basic, but I need to calculate the sizes of an element that’s “currently” hidden using a show.binding. I use the ref-keyword to access it in the view model, and when it’s hidden, all the sizes are 0. I suppose it’s quite ugly to save these values before hiding the element in a separate variable in the view model. Is there any nice, pretty, simple way of getting this data?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 20, 2018, 10:25am UTC](https://discourse.aurelia.io/t/retain-element-size-when-show-bind-hides-it/1111/2 "2018-04-20T10:25:49Z")

</div>

Suppose your element with `show.bind` is bounded to a property name `isVisible`:

```auto
import { observable } from 'aurelia-framework';

class ABC {
  
  // populated by Aurelia ref binding
  readonly element: HTMLElement;
 // this is the cache for element size before it gets display: none
  elementRectSnapshot: ClientRect;

  @observable()
  isVisible: boolean;

  isVisibleChanged(newValue: boolean) {
    // element reference will only be available after bind lifecycle
    // so we do nothing when element is not available
    if (!this.element) {
      return;
    }
    // If new value is falsy,
    // the element it's bound with will be hidden
    if (!newValue) {
      this.elementRectSnapShot = this.element.getBoundingClientRect();
    }
  }
}

```

Why it works: `changeHandler` of `@observable` is called synchronously, thus will be executed before bindings. Which means `isVisibleChanged` will be executed before the element gets hidden, so the size should be valid. For more on difference between `@observable` and `@bindable`, you can have a look at [Difference between @observable and @bindable](https://discourse.aurelia.io/t/difference-between-observable-and-bindable/400)

---

<div class="post-metadata">

**Author:** ![tankBug](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tankbug/32/2023_2.png) [@tankBug](https://discourse.aurelia.io/u/tankBug)\
**Post date:** [April 20, 2018, 12:07pm UTC](https://discourse.aurelia.io/t/retain-element-size-when-show-bind-hides-it/1111/3 "2018-04-20T12:07:05Z")

</div>

Thank you! That seems promising, I will give it a go!