How to display in

Questions
1

What is want is to display
var im1 = new BABYLON.GUI.TextBlock( );
im1.text = document.getElementById(that.id).innerHTML;
var im2 = new BABYLON.GUI.Image(“P_icon”, “path/template/textures/arrowP.png” );
I want to display Them one after another but problem is i cant use BABYLON.GUI.Grid since my content keeps changing.
I am displaying inside a scroll viewer. so width will be same, but height of content changes.
Kindly help me here.

2

Could you try to create a playground? It will help people a lot to give you tips.

1 Like
3

Babylon.js Playground , I want to join im1 and im2 variable in this playground example .If size of content in im1 always changes .so we cannot use grid.I tried stack panel but thats throwing error .

4

@ kindly view the playground link and suggest.

5

Here is a simple PG that shows that you can change the height of an image within a stack panel

https://playground.babylonjs.com/#3N49DC#1

In your case when you replace the im1 with a new source you will have to update the image height with the sourceHeight

2 Likes
6

I think i am not able to explain it , I have to put it inside Pre-made grid.And babylon is giving error adding stack panel inside grid.
"these are error it throws " :

babylon.js:16 BJS - [16:50:04]: Control (Name:undefined, UniqueId:132) is using height in percentage mode inside a vertical StackPanel

. …and many more , Also content is dynamic ,image height width can be set.

7

For a vertical stack panel, you have to give explicit height to children to work as expected:

https://playground.babylonjs.com/#3N49DC#2

If dimensions change, you can change accordingly the stack panel height: I don’t think there’s another way to do it.

2 Likes