# Gui Text not responsive

**URL:** <https://forum.babylonjs.com/t/gui-text-not-responsive/29095>\
**Category:** Bugs\
**Created:** [April 5, 2022, 8:58pm UTC](https://forum.babylonjs.com/t/gui-text-not-responsive/29095 "2022-04-05T20:58:33Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![charliesideroad](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@charliesideroad](https://forum.babylonjs.com/u/charliesideroad)\
**Post date:** [April 5, 2022, 8:58pm UTC](https://forum.babylonjs.com/t/gui-text-not-responsive/29095/1 "2022-04-05T20:58:33Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#8CDRSZ%2319)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

This was working fine in 4.2 but not in 5.03. Text is not responsive.

---

<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:** [April 5, 2022, 9:01pm UTC](https://forum.babylonjs.com/t/gui-text-not-responsive/29095/2 "2022-04-05T21:01:47Z")

</div>

cc @DarraghBurke would be great if you can have a look ?

---

<div class="post-metadata">

**Author:** ![DarraghBurke](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/darraghburke/32/10621_2.png) [@DarraghBurke](https://forum.babylonjs.com/u/DarraghBurke)\
**Post date:** [April 5, 2022, 9:08pm UTC](https://forum.babylonjs.com/t/gui-text-not-responsive/29095/3 "2022-04-05T21:08:29Z")

</div>

Assigned @DarraghBurke on April 5, 2022, 9:08pm UTC



---

<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:** [April 5, 2022, 9:46pm UTC](https://forum.babylonjs.com/t/gui-text-not-responsive/29095/4 "2022-04-05T21:46:18Z")

</div>

Reassigned @sebavan on April 5, 2022, 9:46pm UTC



---

<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:** [April 5, 2022, 10:51pm UTC](https://forum.babylonjs.com/t/gui-text-not-responsive/29095/5 "2022-04-05T22:51:15Z")

</div>

So I found the root cause which is actually this bug fix: [fix incorrect GUI.TextBlock width when resizeToFit is true & fontStyle is italic by Kalkut · Pull Request #11038 · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/pull/11038) We are now measuring text width accurately following this [TextMetrics - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics#measuring_text_width) accounting for way more cases than before and also not including trimmed white spaces in.

In your case you add “padding” with spaces. Could you explain me more about your use case cause there might be a better approach to your problem ?

If you definitely need those empty spaces, I d suggest to play with offsets instead and I can help with the pseudo code for 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:** [April 5, 2022, 10:51pm UTC](https://forum.babylonjs.com/t/gui-text-not-responsive/29095/6 "2022-04-05T22:51:19Z")

</div>

Unassigned @sebavan on April 5, 2022, 10:51pm UTC



---

<div class="post-metadata">

**Author:** ![charliesideroad](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@charliesideroad](https://forum.babylonjs.com/u/charliesideroad)\
**Post date:** [April 8, 2022, 12:29pm UTC](https://forum.babylonjs.com/t/gui-text-not-responsive/29095/7 "2022-04-08T12:29:34Z")

</div>

I’m going to wait to see if there is a fix shortly with 5.1, 4.2 is working fine, and I can use an input statement if need be. But making my own input cursor gives me more control…[https://playground.babylonjs.com/#8CDRSZ#34](https://playground.babylonjs.com/#8CDRSZ#34)

---

<div class="post-metadata">

**Author:** ![charliesideroad](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@charliesideroad](https://forum.babylonjs.com/u/charliesideroad)\
**Post date:** [April 16, 2022, 1:02am UTC](https://forum.babylonjs.com/t/gui-text-not-responsive/29095/8 "2022-04-16T01:02:56Z")

</div>

Got it to work, things seem to be reversed in 5.2 compared to 4.2:  
remove space:

```auto
4.2:
remove space:
IText.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
let cursorText = "| ";
cursorText = cursorText.slice(0, -2);
IText.text = cursorText;
or add space:
cursorText += " ";
IText.text = cursorText;

5.2
remove space:
IText.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
let cursorText = "|";
 cursorText = " " + cursorText; //350
 IText.text = cursorText;
add space:
cursorText = cursorText.slice(2); //409
IText.text = cursorText;

5.2
remove space:
IText.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
let cursorText = " |";
cursorText = cursorText.slice(2);
IText.text = cursorText;
or add space:
cursorText = " " + cursorText;
IText.text = cursorText;

```

5.2

> **[Babylon.js Playground](https://playground.babylonjs.com/#8CDRSZ%2336)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes