# How to get pixel width for 100% width element

**URL:** <https://forum.babylonjs.com/t/how-to-get-pixel-width-for-100-width-element/14880>\
**Category:** Questions\
**Created:** [October 13, 2020, 4:49am UTC](https://forum.babylonjs.com/t/how-to-get-pixel-width-for-100-width-element/14880 "2020-10-13T04:49:14Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bikeman868](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bikeman868/32/11616_2.png) [@Bikeman868](https://forum.babylonjs.com/u/Bikeman868)\
**Post date:** [October 13, 2020, 4:49am UTC](https://forum.babylonjs.com/t/how-to-get-pixel-width-for-100-width-element/14880/1 "2020-10-13T04:49:14Z")

</div>

Hello again 🙂

I have a rectangle in my GUI that has its with set to 100%. I want to arrange the controls inside this rectangle based on its pixel width, but the pixelWidth property is 0 on the first render.

I added this code:

```auto
engine.onResizeObservable.add(function () { redoLayout(); });

```

Which does redo the layout when I resize my window, but the initial layout is wrong because the rectangle’s pixelWidth is 0 to begin with.

Is there an engine observable that I can hook into that will fire after the pixelWidth has been calculated from the 100% width setting?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 13, 2020, 8:52am UTC](https://forum.babylonjs.com/t/how-to-get-pixel-width-for-100-width-element/14880/2 "2020-10-13T08:52:16Z")

</div>

> [@Bikeman868](#):
>
> but the pixelWidth property is 0 on the first render.

I think it’s 0 before the first render?

You can try a `setTimeout(redoLayout, 0)` or `BABYLON.Tools.SetImmediate(redoLayout)`.

---

<div class="post-metadata">

**Author:** ![Bikeman868](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bikeman868/32/11616_2.png) [@Bikeman868](https://forum.babylonjs.com/u/Bikeman868)\
**Post date:** [October 13, 2020, 8:54pm UTC](https://forum.babylonjs.com/t/how-to-get-pixel-width-for-100-width-element/14880/3 "2020-10-13T20:54:30Z")

</div>

Yes, you are right, it it 0 before the first render.

The `setTimeout(redoLayout, 0)` method works on my computer. Is this guaranteed to work in all situations? It seems a bit weak to me to rely on a time delay. Different devices, different browsers, future versions of browsers etc…

I was hoping that the Babylon engine might have an observable for post render that would be more reliable.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 13, 2020, 9:00pm UTC](https://forum.babylonjs.com/t/how-to-get-pixel-width-for-100-width-element/14880/4 "2020-10-13T21:00:01Z")

</div>

> [@Bikeman868](#):
>
> The `setTimeout(redoLayout, 0)` method works on my computer. Is this guaranteed to work in all situations? It seems a bit weak to me to rely on a time delay. Different devices, different browsers, future versions of browsers etc…

Yes it is. In fact it is not a timer, the `0` value means to execute the code at the next micro javascript task. That means the current thread of execution is finished first, then the code of the `setTimeout(..., 0)` will be executed. As the current thread of execution is the Babylonjs rendering, you are sure you will have had a frame rendered (and so the `pixelWidth` value updated) when your timeout code is executed.

> [@Bikeman868](#):
>
> I was hoping that the Babylon engine might have an observable for post render that would be more reliable.

You can use `scene.onAfterRenderObservable`. You also have `engine.onEndFrameObservable`.