GUI position

[Dad72]

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.

 

[GameMonetize]

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

[Dad72]

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.

 

[GameMonetize]

1. Yes you can: http://www.babylonjs-playground.com/#XCPP9Y#57

[Dad72]

Ok, I understand better.

[Dad72]

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

 

[GameMonetize]

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

[GameMonetize]

issue tracked here: https://github.com/BabylonJS/Babylon.js/issues/2247

[GameMonetize]

I will rename margin to padding