Wrong X/Y coordinates displayed in DnD?

[mimostel]

Hello Thunkers !

After struggling a while with my new issue:
https://community.thunkable.com/t/trouble-to-align-components/1982363

I said to myself to keep it simple, and start with basics.
So, 1st of all, I eliminate layouts from equation (thinking that maybe issue is there when rendering on the screen). I tried to clone a lonely button horizontally and vertically.

First step, calculate the coordinates and dimensions. For that, I obviously need the screen’s width, and I made the calculations below to get a square and 2 similar margins (left/right) after I’ll have a 9 button’s row) - all as integers, to eliminate possible errors due to decimals.

Now, the cloning phase:

Everything seems to be working… except the fact that the result looks like:

As you can see, the left margin is not the same size as right margin… and there’s spaces between buttons I can’t explain.
I put some alert to double check the math:

And pressing, for example, the 5th horizontal button, will have the next result:

Correct, x coordinate is 9 + 4x38 = 161

So, the app tells me that Math has right, but the displaying result on device’s screen doesn’t care about it Why then, left/right margins are not equal, why buttons have spaces between ? (the obvious answer is that displayed buttons are actually smaller than Thunkable knows and reports)
So, before going to work with more complex things like layout, I need to understand this basic thing and how can be solved.
If you wanna try by yourself, I’ll put here the link to test app:
https://x.thunkable.com/copy/e82792b87b47fd79d7828371ab862a71

Thank you for your time.

[tatiang]

Why did you start a new topic for this? It seems like in order to help you, we need to know the info from the previous topic (which you linked to at the top).

@jared or @domhnallohanlon Can you merge the two topics? Thanks!

Here’s how it looks on my iPhone 11:

[tatiang]

And yes, there’s definitely something wrong here. If I create a button the same size as yours (38x38 pixels) and set it’s X value to 376 which should position the button at the right edge of the screen (because screen width 414 minus button width 38 equals 376), it does not appear at all.

The right edge of the screen seems to be at about 377 because if I set the button’s X value to 339, it’s right edge touches the right edge of the screen and the button’s right edge should be at 339 + 39 = 377.

I opened the screenshot in Illustrator and the button is approximately 37x37 pixels. So not quite 38x38 but close. I then removed the border and radius and can confirm that the button is 37x37 pixels in Illustrator. The black outline here is 38x38 pixels:

It’s hard to see at small scale but there’s clearly a one-pixel border on the left and bottom which indicates that the darker green square is 37x37. But that still doesn’t explain why the right edge of a 414 pixel wide screen is only 377 pixels wide!

[mimostel]

@tatiang

Why did you start a new topic for this? It seems like in order to help you, we need to know the info from the previous topic (which you linked to at the top).

Because in that topic I’m talking about new layouts, here I’m talking about another thing, like X/Y coordinates that are kind of useless for us, as they are known only by a factor behind scene. My apologies if I made you feel uncomfortable doing so.