Legacy Component positioning Live Test doesn't match Web test

Questions about Thunkable
, , , ,
1

Hello,

I was creating an app for my first time and started by using the Drag & Drop UI. I realized that the D&D UI did not have “Multiline” text input - which is integral to the professional function and design of my app. It’s mainly for taking notes about your own behaviors and therapy steps. Long story short, I had to start over using the Legacy UI.

I have now designed and blocked out the app. The FUNCTIONS all work as intended… however the design is giving me lots of trouble. When I test on the computer using the “Preview” option, it looks exactly how I want it to. However, when I “Live Test” on my phone everything is off screen, cutoff, or zoomed in. Other “Invisible” components are also “Visible” when I live test even though I have “Visible” set to False. They should only show after an input. The Preview does it exactly like I want it to be. Live Test does not… not even close.

I’d like to post a link to what I’m doing so that you can check my work and see if I have made any grave errors. Going from D&D to Legacy was very overwhelming so bare with me when you see the rookie mistakes. Thanks! I’ll also post some screencaps so you can see what I’m talking about with my phone Live Test.
Preview:

HomeScreencap_Preview
HomeScreencap_Preview595×732 46.3 KB

MyNotesScreencap_Preview
MyNotesScreencap_Preview583×702 25.3 KB

Phone:

Phone_Screenshot1
Phone_Screenshot11080×2400 204 KB

Phone_Screenshot2
Phone_Screenshot21080×2400 151 KB

Link to project - Posted 8/26/2021 (Expires 10/25/2021)
https://x.thunkable.com/copy/790702e5bdb2fb72b57ea2be90af8ca8

Thank you for any help,
Ash

1 Like
2

They are not supposed to be the same. There is a footnote mentioning this.

Thunkable developers are trying their best to make them close but the best practice is to design your screens to fit the mobile unless you are planning to run your app as a web app or responsive app.

3

Indeed.

Any suggestions on, say, why my loading spinner is visible while I have it set to false? Or the label that is set Visible False but shows as soon as the page opens?

A have “if then” blocks set up to hide and show those, but they aren’t operating on the mobile app. If you know of any common mistakes I can look for it would be appreciated.

I can figure out the design stuff by trial and error… but this visible false/true thing is a puzzle to me.

1 Like
4

There is a known issue/bug with Android devices that the visible status will not change to hidden if the component position is set to Absolute.

If this is the case then solutions/workarounds are limited.