Is there anyway to have a button embedded within a text box?

For example, I’m trying to take a paragraph provided by the client, highlight one word of that paragraph, and make it a button to call another UI box. Something like the image attached. Spent a good pat of the day trying to find a solution but have been unable to. The StructuredTextBlock PR looked promising but there hasn’t been much progress in a couple of months. Thoughts?

Hello and welcome to the Babylon community! The InputText class doesn’t have the addControl method, so it can’t act as a Container for the Button. But you could create a Button and position it over the text, so that it covers the highlighted word.

1 Like

Thank you for the reply, unfortunately, when dealing with a scalable canvas that can be viewed at different resolutions, the button placement gets off whenever it’s resized. That was the first route I took. I think we will have to redesign the function, but I’m hoping that’s something that is on the roadmap for the team. Would make custom UI creation a breeze without having to use multiple environments.

For UI creation we do have the GUI editor now, might be helpful :smiley: Introducing the GUI Editor Alpha! - Announcements - Babylon.js (babylonjs.com)

Offering my 2 cents: If you knew it was all going to be on one line, I would offer you to use a stack panel. This could create your text as the first element, then the button, then the remaining amount of your text. Where this gets tricky is you have multiple lines that can scale? Unless you made it so your entire UI scale with the canvas size. (See render at ideal size)

You could try playing with grids inside grids where each line where u will have the button will have 3 cells inside it, where lines that don’t have the button only have 1 cell.

Finally I believe StructuredTextBlock PR might have fallen off but not entirely sure about that.

Hope this helps as a possible idea. Best of luck! :smiley:

2 Likes