Trying to get a fairly simple set of text labels and images to display filling the full width of the phone. I have a layout component and a bunch of containers. The containers have modes for relative fill/percentage etc. but the top level layout only seems to have a fixed pixel width + the option to stretch.
In portrait if I set the layout to around 380 pixels width and set it to “stretch” it pretty much works consistently across the web app and the live app on my iphone, the contents are close to being correctly resized on both platforms.
I can’t find an equivalent in landscape (which is what I need): setting the layout width to 651 makes everything line up in the web app but in the iphone test app the content runs past the end of the screen
Setting width to about 600 lines things up on the iPhone test app but then there is a big empty strip running down the right hand side in the web app.
As an idiot check I downloaded an example that had a layout block, set it to landscape and then dragged the layout component to the RH edge. The result was similar, there was no consistency of alignment (overall app width) between platforms in landscape but it works in portrait.
I’ve also tried adding a code block which automatically sets the width of the layout component to the screen width but the results are still the same. There seems to be a fundamental link between the hard coded pixel width of the layout component and the ultimate percentage fill of the screen when stretch mode is activate.
Help very gratefully received, this is a total blocker to getting an app shipped. Is there a correct way to precisely fit all contents to fill the screen regardless of size? Is there something broken with landscape?
If you are using the Layout component, you will want to set that to 375x667px, that is the default size of the screen we use in Thunkable. The Layout component will scale the UI components accordingly.
Hi, thanks for that. With further investigation it seems that the live app doesn’t update properly when switching between portrait and landscape. One part of the issue I have been seeing is that I have a first page in landscape but the live app starts in portrait, stores the screen dimensions then swaps to landscape to show my first page but is still using the portrait dimensions so everything is then formatted incorrectly. I’ve now tried it as an apk and the issue isn’t there. However, there seem to be a number of discrepancies between the Live App and a built app related to how things are formatted on the screen. There seems to be a similar issue with screen dimensions in the IOS live app but I haven’t tried a built version yet to see if it is resolved.
It’s set to Phone + Landscape in the App Settings and each page is also set to Landscape.
I think I may have been premature in saying the issue get’s resolved in the built APK version.
The issue seems to occur in the Live App because the Live App menu screen is in Portrait so when you click on an app to test the whole Live App is in portrait and these are the screen settings that are stored as the test app loads.
I’ve discovered however, the Live App updates itself if it’s left running while you make changes in the Web Editor so if I load the app in the Live App, leave it showing the first page then make a simple change, when that change gets updated in the Live App it triggers a re-read of the screen dimensions and the formatting jumps to the correct dimensions so I can test it like that.
This appears to be the same issue as discussed here:
Having now moved to built apps the rotation between landscape<->portrait doesn’t update screen dimensions across all platforms, including web apps viewed on mobile devices.
