Sign in to follow this  
Dad72

GUI position

Recommended Posts

1)

I try to position an image in the upper left corner with (top and left property). but the image is in the center.

PG Here:

http://www.babylonjs-playground.com/#XCPP9Y#51

2)

I also wanted to create a round picture, but cornerRadius does not work on the image

image.cornerRadius = "50px";

http://www.babylonjs-playground.com/#XCPP9Y#52

3)

I 'have also try to position a text

This not work:

text.TextHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
text.TextVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;

This not work:

text.top = "10px";
text.left = "10px";

http://www.babylonjs-playground.com/#XCPP9Y#53

As do I feel that it is all the controls that do not position to the left.

The button is always at the center horizontally or vertically.

 

Share this post


Link to post
Share on other sites

1. Read the f** manual? http://www.babylonjs-playground.com/#XCPP9Y#54 (http://doc.babylonjs.com/overviews/gui#alignments)

2.Just set your image inside a rectangle: http://www.babylonjs-playground.com/#XCPP9Y#55

3. it is textHorizontalAlignment with a lowercase at the beginning: http://www.babylonjs-playground.com/#XCPP9Y#56

Share this post


Link to post
Share on other sites

I read the manual DK

1. So we can not use top and left for images?
2. Ok, I thought we could directly positions the image without the add a rectangle.
3. Ok, This is because I translated the manual into French and that put me has capitalized the first letter.

 

Share this post


Link to post
Share on other sites

When I use marginRight, marginBottom, marginTop, the button that move from within and is not clickable. (The narrowed button and remains on its position to the left)

left and top is fine, but it acts as margin css. I thought he was in absolute position, but it seems in relative position.

With marginRight (It acts as padding in css)

http://www.babylonjs-playground.com/#XCPP9Y#59

With marginTop (It acts as padding in css)

http://www.babylonjs-playground.com/#XCPP9Y#76

With marginBottom (It acts as padding in css)

http://www.babylonjs-playground.com/#XCPP9Y#77

By cons marginLeft behaves normally 

http://www.babylonjs-playground.com/#XCPP9Y#78

 

Share this post


Link to post
Share on other sites

This is the way it is supposed to work :)

Margin is INSIDE the width as mentioned in the doc: http://doc.babylonjs.com/overviews/gui#position-and-size =>

Quote

Please note that margins are inside the control. This means that the usableWidth = width - marginLeft - marginRight. Same for usableHeight = height - marginTop - marginBottom

The bug is actually with marginLeft actually :D

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.