Components keep changing position

Hi there everyone!

I’ve been running into an issue with my components moving around the screen on the PWA that don’t reflect their position in the Adalo builder.

For example, I have 3 screens that all have the same setup (image on top, 2 text boxes beneath it, and a button at the bottom). The button is fixed to the bottom, same with the 2 text boxes, they work just fine. The images are fixed to the top and one screen has the bottom of the image sit a little lower than the 1st. and the 3rd is even lower than the 2nd.

I doublechecked and everything has the same fixed positions. Not sure what’s causing the issue.

Has anyone been able to work out how to get your components to stay where you place them on the builder?

1 Like

I won’t be able to answer why and how to fix, BUT I noticed in all app templates that “section” components (aka. rectangle components) are massively used to separate other elements.

I guess it’s a way to fix the layout and all components.

Have a look at the templates @austinkthompson, I think it may help to fix your / our floating components issues.

3 Likes

I am having the exact same issue as @austinkthompson and I saw your comment and tried to section off the buttons with small rectangles that aligned to other rectangles then made them transparent to try to fix this “elements jumping all over the place problem” and didn’t have any success. I spent 3 hours just trying to properly align 2 buttons and no success. This is a huge issue Adalo needs to come up with a fix for.

1 Like

I’m also getting killed on time spent trying to properly structure embedded rectangles to get some simple pages looking good… I’m a day and a half in on one form and it’s frustrating.

Also there’s not too many template examples available for a Web App vs all the Mobile options they have. Existing Web App examples pretty much just mimic the small real estate of mobile phones where you just scroll vertically to see more of the app.

I’m wondering if I should even try to put different components horizontally to each other because of the wider width of web page real estate…