Stackpanel Children Position

Questions
1

In the following example, any suggestion to adjust the right two buttons to make the “Click Me 2” button line up on the top with “Click Me 1” button? The intent is to click “Click Me 1” button to show up two buttons on the right side of the button being clicked.

https://www.babylonjs-playground.com/#XCPP9Y#1520

Thanks!
-Jimin

2

Well, adding:

    button.top = "-20px";

does work, but I’m not sure it’s the best solution…

1 Like
3

Thanks! @ Evgeni_Popov. It works for 2-3 buttons. What I have are multiple buttons as shown in the example below.

https://www.babylonjs-playground.com/#XCPP9Y#1521

I still couldn’t figure out a way to get the buttons to show up on the right side of a specific button. It is like to expend a button to a few buttons on the right side in a pull-down menu. I tried to stack in the horizontal direction then vertical direction and also tried to use a container; they didn’t work.

4

Hi guys. I’m just passing-along another playground that I once saw.

https://www.babylonjs-playground.com/#37G8FG#2

(someone else playing with sub-menus).

In general, this might be a job for GUI “Grid Control”.

Let’s call this thing… a “treeMenu”. I THINK… if you use a gridControl to make a drill-able treeMenu… then ALL of your buttons (cells) must have the same height (grid row height). AND… all of the buttons in any “sub-menu” (branch menu)… must have the same width. (grid column width)

You’ll need a type of “grid manager”… active… which uses NO stackPanels at all. It always uses grid cells, instead. It needs to watch for clicks, and determine where sub-menus need to happen, and be able to fill (and clear) cells in any column and row. It will build branches that LOOK-LIKE stackpanels, but are not such. Instead… the manager is “stocking” (and clearing) grid cells.

Keep in mind that buttons are simply JS objects, and can be stored in arrays… just as easily as they can be stored in gui containers. They are easy to “wrangle”(a herding thing) and organize into hot-swappable groups (a cattle-drive thing). :slight_smile:

I THINK… a gridControl and custom gridCell manager… will give you full power for treeMenu’s. No promises, though. :slight_smile: I have never tried stack-less drill-menus with a gridControl… but it sounds like fun.

1 Like
5

Hi, @winnie, thank you for your playground example and your insight on this. The example is showing several stack panels in horizontal direction. The problem is that the “show” button cannot be mixed closely with other vertical stack panel buttons due to the restriction of the boundary of stack panel. It may be put in a container; but the container shape is restricted. The documentation shows a method to unclip the big children in a small container. It seems not working, see below.

https://www.babylonjs-playground.com/#LBF8S2#5

I think the issue can be resolved by having a custom shaped container, like a “L” shape. Your suggested grid container could be another way to get the issue resolved. It could be the exercise for another day / week. However, thanks for your thoughts on this; very helpful. :wink:

1 Like
6

@Wingnut, I gave it a try for the use of grid for the button tree. It seems working. See below.

https://www.babylonjs-playground.com/#H3W8C5

It is still pretty confusing regarding the execution function for each grid cell since there is a possibility that each cell represents multiple buttons. But it is something next… Thanks again for the suggestion on this.

1 Like