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.
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.
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!
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:
Add a rectangle component to the screen
Edit the style of the rectangle to have the desired width
Make this rectangle a group
Drag the misaligned components into this group (in the component list on the left)
Move components around inside the group
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
