Chat box GUI issue

Hello all, I’m working on the GUI part of Babylon.js and stuck in one part of this. I’m not able to get the text in the stack panel.

https://www.babylonjs-playground.com/#A2GDWD#7 ---- Taking the reference of this example. Please help me in getting the text in the stack plane.

Hi,
To be honest, I didn’t investigate your code all too much. Like I don’t know why you are creating multiple stackpanels at once, but I guess you must know what you are doing, yes? As for your question, the answer is quite simple. A stackpanel with no height will have a height of zero (as opposed to width which is 1 or 100% of its container/parent. Unless you set it to adapt its height from the children (textblocks or other stackpanels) the stackpanel will stick with a height of zero. Reason why you cannot see the text :wink:

Edit: Just in case you didn’t get my answer, I quickly updated the PG with adaptHeightToChildren (line 12 in the PG). Also quickly changed some layout parameters to work with resizeToFit. In essence, you should align all to top. Pushed all new instructions to the left. Hope this helps. I don’t want the others say I’m only giving part of the answer :wink:

Let us know if you are good with this or need more help…

Thanks, buddy, Actually I’m new to Babylon so it’s quite difficult for me to understand GUI properly. Thanks for this, I’ll try to learn this properly.

No worries. Looks like you’re doing good already. Making a chatbox with the BJS 2D GUI is not the easiest way to learn about the specificities of the GUI. It’s still a bit cumbersome and limited in use but it’s constantly worked and improved and is getting better with each update. Have a great day :sunglasses:

cc @carolhmj and @PirateJC

Woah that’s an AMAZING chatbox! Would you like to add it to our Docs, in the StackPanel section ( The Babylon GUI | Babylon.js Documentation (babylonjs.com))? I feel this is a great example to learn from. :smiley:

Just to make this clear: That’s not my chatbox. I simply helped with my little understanding of the GUI for a quick fix. The chatbox is the one from @Abhishek_Shakya, who says he’s new to BJS. I’m sure eager to see what he will bring next, starting with this kind of thing :smiley:
But I agree that it would deserve to be added to the examples, to the doc or else, I shall use it as a reference in my tutorial (once I find the time to finish it, still on the todo list). I had a number of other things to do lately but will return on it shortly. Have a great day, :sunglasses:

Oh shoot, I confused it! Thanks for the clarification, and I definitely extend the offer of contributing to the docs to @Abhishek_Shakya , that’s some great work :smiley:

2 Likes

Yeah, thanks again nowadays I’m working on adding animation in character and also broadcasting animation to colyseus. I feel awesome as if you like this thing so much. Whenever I work on GUI I’ll now remember all these things thanks again.

1 Like

Thanks, I like BJS so much and now don’t want to lose the chance to work on this that’s why I’m doing so many things at the same time. As this is related to official work so bounded toward the things what to use and what not.

1 Like

Hi @Abhishek_Shakya ,
Hope you are well and managed to make the last fixes to your chatbox. Else, do not hesitate…
Since you kindly shared your awesome base with us and actually inspired me to add a chatbox to one of my demo project, I thought it would be fair to share my version with you (based on yours, hope you don’t mind…) For my version, I chose to use a scrollviewer for container. I like being able to see when scrolling (old school like :wink: Also, it’s more for a commercial type of site. Your version is more like a console. With the scrollviewer, I’m also aligning everything on top and keep the bottom view using the scrollviewer verticalBar value. So, yes, a bit different yet largely inspired from your work. And I shall thank you again for this :pray:

You can also see it in-situ in this demo preview of ‘Project Chair
Have a great day :sunglasses:

3 Likes

Thanks, I’ll definitely look into this.