Grid row size chage

Questions
, , ,
1

I want to craete a drop downv ui in my project when i click on leather it will goes to the leather option menu and after that when i click on kalahari btn i want that canvas to be shown there. i know i am making some mistakes but how can i improve that
project link https://playground.babylonjs.com/#SI13I2#15

2

Can you state your question more clearly? From what I can understand of your description, your playground is already doing all of that.

3

yes but its not propperly being displayed in the ui i want to display that propperly in the ui

4

What do you mean by “properly”? What do you expect to display? We won’t be able to help you if we can’t understand what you need.

5

i want to change the size of the grid that i have used but that i cant chnage that like in the line 368 - 378 i tried to do

6

Yes, well (correct me if I am wrong) but you cannot change the grid without re-generating the entire advancedDynamicTexture and all children. I believe you are simply taking a wrong approach here (probably based on HTML/css). While you cannot resize your grid, you still have a number of other options to do what you need:

  1. You can change the panning, alignment, height and width of controls and containers depending on context/button click.
  2. you can simply create another container/stackpanel imbricated in your parent container and make it visible or invisible depending on context.

What I can detect here already is that all your controls are aligned with center. They also mostly use only percentage mode. Obviously, if the grid cell height is inappropriate for this display, your button will not show ‘correctly’, as you say. Start by aligning on top your controls and use padding and/or rectangles to create the margin/padding between elements.

I believe what you want is show something like this, correct?:

gui-debug
gui-debug1300×814 151 KB

Well, the good news is ‘it’s totally feasible’. The bad news, I am sorry to say, your entire building and approach of the 2D GUI is just all too wrong and messy to let me give you any quick tip here to fix it.
The only thing I could really recommend would be to have a closer look at the doc, may be follow a tutorial on how to make a UI (including mine that can be found here).

Now, I know people are sometimes not so much willing to spend time learning and understanding things :wink: That’s ok. I can live with that. So to try answer your question, what you did wrong here is :
You are using only percentage mode for both your button and rectangle AND You are also using centered vertical alignment for both. The point is when you make the rectangle invisible, it will no longer be accounted. Or on the contrary, when it comes visible again, then it will be accounted.
To make sure your button always remain on top and at the same size:

  1. Use pixels and not percentage to define its height
  2. Align it on top
    Next, to make sure your container below always displays under the button, simply
  3. If the button takes 20% in height of the container (or grid) height, then your container below should be given a top of 20%. That’s all it is, as shown in this revised version of your PG
    Hope this helps :smiley:
1 Like
7

thanks for the it did help and i will improve the layout by making some changes in it.

1 Like
8

Don’t give up. Just realize it took me over a year to simply get that level of understanding of the BJS GUI (and I’m still far from having a complete understanding of it) :wink:

1 Like