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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.