# Highlighting textblock

**URL:** <https://forum.babylonjs.com/t/highlighting-textblock/24162>\
**Category:** Questions\
**Tags:** gui\
**Created:** [September 28, 2021, 6:00pm UTC](https://forum.babylonjs.com/t/highlighting-textblock/24162 "2021-09-28T18:00:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![killkrt](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/killkrt/32/12385_2.png) [@killkrt](https://forum.babylonjs.com/u/killkrt)\
**Post date:** [September 28, 2021, 6:00pm UTC](https://forum.babylonjs.com/t/highlighting-textblock/24162/1 "2021-09-28T18:00:22Z")

</div>

Hi,

I was trying to make a basic game menu that highlight entry when mouse hover on them, I am using `onPointerEnterObservable` and `onPointerOutObservable` and I am changing the `outlineColor` and `outlineWidth`, but I it seems that setting the `outlineWidth` to zero doesn’t make it invisible.

Here my [code](https://www.babylonjs-playground.com/#E5IMCJ).

How I can fix it? BTW, it is the right way to implement it or there is a more _idiomatic_ and performant way?

Thank you.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 28, 2021, 6:55pm UTC](https://forum.babylonjs.com/t/highlighting-textblock/24162/2 "2021-09-28T18:55:41Z")

</div>

I guess it is because your control is eating all the space 🙂

@msDestiny14 can help fixing it

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 28, 2021, 6:55pm UTC](https://forum.babylonjs.com/t/highlighting-textblock/24162/3 "2021-09-28T18:55:44Z")

</div>

Assigned @msDestiny14 on September 28, 2021, 6:55pm UTC



---

<div class="post-metadata">

**Author:** ![killkrt](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/killkrt/32/12385_2.png) [@killkrt](https://forum.babylonjs.com/u/killkrt)\
**Post date:** [September 28, 2021, 7:34pm UTC](https://forum.babylonjs.com/t/highlighting-textblock/24162/4 "2021-09-28T19:34:19Z")

</div>

Uhm, it seems that the problem is that `onPointerOutObservable` is never called (even if I am moving out the mouse), so it is not related to `outlineWidth`.

Maybe @sebavan you have already realized, so my note is not relevant.

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [September 28, 2021, 7:35pm UTC](https://forum.babylonjs.com/t/highlighting-textblock/24162/5 "2021-09-28T19:35:54Z")

</div>

Not quite 😉

It does have to do with the size. Let me show 🙂

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [September 28, 2021, 7:42pm UTC](https://forum.babylonjs.com/t/highlighting-textblock/24162/6 "2021-09-28T19:42:36Z")

</div>

[https://www.babylonjs-playground.com/#E5IMCJ#1](https://www.babylonjs-playground.com/#E5IMCJ#1)

This is the fixed playground. The problem was that the text was taking up the entire screen size. Width 100% and height 100% (100% by 100% is the default for textBlock btw). Because it took up the entire screen the mouse never has a chance to leave so onPointerOutObservable is never called.

Now there are a couple of ways to fix this. You can manually change the width and height. What I think works best for your case is resizeToFit = true; (line 35). What this will do is set the container’s size to match however long the text will be. This is better when you need accurate collision.

Finally last helpful tip for the inspector. There is this draw debug lines button that helps to show where the collision box actually is (the light blue) This might help in future 🙂

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/c/8c85d8a0eab729eb2c4a536ecca94c9650a85560.png)

Once I did the fix this is what it now looks like:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/f/9f8ce90bd3cad7944e2da94b5b7e5d1d00cde33d.png)

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [October 16, 2021, 8:17pm UTC](https://forum.babylonjs.com/t/highlighting-textblock/24162/8 "2021-10-16T20:17:45Z")

</div>

Unassigned @msDestiny14 on October 16, 2021, 8:17pm UTC


