# rexUI BBCodeText and TextArea isOverflow wrong calculation

**URL:** <https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341>\
**Category:** Phaser 3\
**Created:** [September 30, 2021, 7:59am UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341 "2021-09-30T07:59:11Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Puccini](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/puccini/32/4984_2.png) [@Puccini](https://phaser.discourse.group/u/Puccini)\
**Post date:** [September 30, 2021, 7:59am UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/1 "2021-09-30T07:59:11Z")

</div>

Hi there,

im start using the BBCodeText feature from rexUI plugin and get some problems with the “isOverflow” calculation.  
It seems the the “linebreak” calculation is something “wired” in bb code.  
For Phaser.Text is used the option for advancewordwrap.  
For BBCodeText is try “char” and “word”, but each time same behavior.  
The text itself is “normal” text without any linebreaks, bbcode or stylings… Its using the same global font settings.

see this:  
(the red square was added via paint to show the boundings from the text-area)  
 ![rexUI_BBCodeText_overflow](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9c173fb33d372d023d7257ccf5918a2ddb11e3d9.png)

Any idea how to fix this?  
🙂  
Greetings!

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [September 30, 2021, 8:50am UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/2 "2021-09-30T08:50:34Z")

</div>

Please provide a simplest, runnable test code, to reproduce this issue.

---

<div class="post-metadata">

**Author:** ![Puccini](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/puccini/32/4984_2.png) [@Puccini](https://phaser.discourse.group/u/Puccini)\
**Post date:** [September 30, 2021, 10:07am UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/3 "2021-09-30T10:07:16Z")

</div>

Sorry.  
I missed this 🙂  
Here u go:  
[https://jsfiddle.net/ragesoft/cug8ore7/](https://jsfiddle.net/ragesoft/cug8ore7/)

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [September 30, 2021, 3:31pm UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/4 "2021-09-30T15:31:18Z")

</div>

Your assumption about wrapping of BBCodeText is correct. BBCodeText does not support `useAdvancedWrap` yet, i.e. the wrapping result won’t be equal to `useAdvancedWrap` enable.  
Will add this feature suggestion into TODO.

---

<div class="post-metadata">

**Author:** ![Puccini](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/puccini/32/4984_2.png) [@Puccini](https://phaser.discourse.group/u/Puccini)\
**Post date:** [September 30, 2021, 3:45pm UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/5 "2021-09-30T15:45:44Z")

</div>

Thx. Sounds great.  
But its Not only the advancedwordwrap, but the wrong height calculation in current function it seems.  
U See the additional line break after the “looongg” Word?  
Seems like some double break Problem…  
Dono where this happens in Code.

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [September 30, 2021, 4:18pm UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/6 "2021-09-30T16:18:27Z")

</div>

I see, I will compare the case of `useAdvancedWrap` is `false`.

Edit:  
Here are wrapping result of

- Left `useAdvancedWrap` is `false` of Text
- Right BBCodtText

![圖片](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/e537d7c71b65c6e2c2dd29097059e2d167b8fae8.png)

The extra new line are from inconsistent wrapping logic.

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [October 1, 2021, 5:54am UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/7 "2021-10-01T05:54:15Z")

</div>

Text wrapping issue has been fixed at latest minify file.

This is a snapshot of **useAdvancedWrap: false** case :

 ![圖片](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/54767a336931897d0b7d06706a57b0306e1a3583.png)

---

<div class="post-metadata">

**Author:** ![Puccini](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/puccini/32/4984_2.png) [@Puccini](https://phaser.discourse.group/u/Puccini)\
**Post date:** [October 1, 2021, 12:56pm UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/8 "2021-10-01T12:56:48Z")

</div>

That was fast.  
I’ve updated the code with a new “longer” word.  
See the “cut off” at the end of the second word “er”?

So in this current version, the “linebreak” is fixed, but the “break inside word” is not. 🙂

But thx so far! u are awesome!

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [October 1, 2021, 1:04pm UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/9 "2021-10-01T13:04:29Z")

</div>

How about setting `mode: 'char'` in style config of BBCodeText?

---

<div class="post-metadata">

**Author:** ![Puccini](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/puccini/32/4984_2.png) [@Puccini](https://phaser.discourse.group/u/Puccini)\
**Post date:** [October 1, 2021, 1:19pm UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/10 "2021-10-01T13:19:49Z")

</div>

Thats no option / solution in this case, because so it will also break “short” words on end of line and dont break whole word to new line 🙂 That dosnt looks good.

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [October 1, 2021, 1:24pm UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/11 "2021-10-01T13:24:49Z")

</div>

I see, so the statement is – char-wrapping only for the word which the width is larger than line width?

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [October 2, 2021, 3:32pm UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/12 "2021-10-02T15:32:33Z")

</div>

Now word-break to lines if width of this word is larger than line width, see [demo](https://codepen.io/rexrainbow/pen/BaZEGOB)

---

<div class="post-metadata">

**Author:** ![Puccini](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/puccini/32/4984_2.png) [@Puccini](https://phaser.discourse.group/u/Puccini)\
**Post date:** [October 2, 2021, 4:32pm UTC](https://phaser.discourse.group/t/rexui-bbcodetext-and-textarea-isoverflow-wrong-calculation/10341/13 "2021-10-02T16:32:34Z")

</div>

That looks so good. 1000x thx. I will try it in my game. But i depend on npm package to be Update becuz i use webpack to build my ressources. 🙂 so i will wait for got push.
