Randomly misaligned components

Hello,

The components on my app seem to be randomly getting moved about, I assume due to overlapping margins that I don’t have control of. In the image below, I’m referring to the text Income, Savings, Expenses, and the similarily placed text below that. The iPhone 8 is displaying it correctly.

The text and arrow are created by a Text component and then an Icon component. They are not grouped.

I think I should try to work out a way to make these components into a list, however the values on the right are calculated by Summing those fields for the Logged-in User, so I’m not sure how I can go about propogating the list. Any ideas or help would be greatly appreciated.

1 Like

Grouping, with a rectangle behind acting as a container, could definitely help with alignment issues. It definitely is strange that alignments fall out of sync device to device, so it is something that we will need to investigate, however, the grouping method I mentioned above, should theoretically fix the issue for you.

1 Like

yes, what’s the deal with that?

my current solution is aligning everything to the center and resizing horizontally…

1 Like

Also seeing this bug. It seems tied to how elements are positioned (relative, absolute, etc.) on the page. Would love to have simple control over element positioning!

Grouping is not fixing it for me, will keep troubleshooting and report back.

@rarelyJeremy, did you ever find a solution here? I’m seeing something similar and would be curious to know how you handled it? Did you use a rectangle as a container? Thanks!

1 Like

I also had this happen to me and thank you @zachbharris for the suggestion, as a beginner it took me a little time to work it out, so this is what I did:

  1. Add a rectangle component to the screen
  2. Edit the style of the rectangle to have the desired width
  3. Make this rectangle a group
  4. Drag the misaligned components into this group (in the component list on the left)

forum

  1. Move components around inside the group
  2. Now moving the group, moves all the components in that group
  • The group has a style (e.g. width) that is different and independent from rectangle
  • I left the rectangle with a background colour for testing and then turn off background when finished
  • And now have a group of each section of page/screen (I think this is how web designers use div’s)
  • Test by previewing and then changing the size of the browser window

Hope that helps (and is correct) but that is what worked for me

1 Like