Test App doesn’t match app builder view

My test apps when I try from my device don’t match styling that I set in the web browser. Any suggestions?

Hi there,

With the green screen, it seems that you are simply testing the app on a device with a larger screen than the screen that is visible in the project builder. Would I be correct if I guessed that your items’ height and any vertical spacing is measured in ‘fit contents’ and absolute sizes (px) rather than ‘fill container’ and relative sizes (%)?

With the blue screen, my first guess would be that you have the Scrollable property of the screen enabled. This would explain the background photo not being visible and the vertical alignment not matching what you want. If this is the case, then I would further guess that the height of your Text Inputs is expressed as a percentage of the Screen height. This doesn’t work when your Screen is scrollable, as the Screen is going to be as tall as the components it contains. If the screen is getting its height from the components, and the components are getting their height from the Screen, then nothing has a fixed reference point to determine height/width/spacing!

To resolve this behavior:
For the green screen, try using relative sizing more. I think if you set the Screen’s ‘vertical alignment’ to ‘space-around’, you’ll also be more pleased with how the components are laid out on your device’s screen.

For the blue screen: turn off your screen’s Scrollable property. That should pretty much take care of it!

1 Like