I’m new to Thunkable and have built a basic timer app as my first app. It looks great and works great in the preview and design environment, but when I push it to my phone (iOS), the buttons get all wonky.
Here is what it looks like in preview:
And where is what it looks like on the phone:
The size of the buttons were set on the design tab if that makes any difference.
Any thoughts on what I did wrong and how to fix this?
Unfortunately, screenshots of the app rarely provide enough information for troubleshooting.
Can you share a link to the project? If not, then screenshots of the properties for those buttons and their containers (e.g. screen, row, group) would be needed.
Good feedback on the screenshots. Thank you.
Here is a link - Thunkable
I was hoping this was in the older Snap to Place interface because you have more control over sizing and positioning there. But it’s the newer Drag & Drop interface.
I reported this issue here:
I recommend adding a comment with a link to this topic. Official bug reports often get resolved quicker than forum posts.
At the moment the rendering of all components in the DnD is larger than the allowed area of the screen.
Temporarily, to get around that make the screen scrollable.
Thanks, @tatiang for looking into this. Glad that I’m not losing my mind.
Do you want me to submit this as a comment in Github?
Thank you @muneer. I’ve made the pages scrollable and will report back when the download is available.
@muneer Thanks for the suggestions. Made all pages scrollable and unfortunately, it didn’t change the size of the buttons. Still looking like wonky rectangles.
If I replaced the button with a clickable image, would it have the same result?
Other ideas on how to fix this for iOS? I wanted to use this for my son’s tournament this weekend, so putting some pressure on myself to finish this up.
Thank you again.
Yes, I think that issues can sometimes get buried a bit so a new comment can bring it to the forefront.
I manually changed the button sizes so they would display correctly on an iPhone. I forget what percentage I used but it was something like 80% of the height it should be in a browser. I just Live Tested a bunch of heights to see what looked right/square.
Thank you. Is there some documentation on how to do this? Is that done via a block when the page is opened?
I was referring to the overlap I noticed in my phone.
For button sizes you need to adjust the size and make use of the companion app to see the nearest to the downloaded app.
You will need some trial and error to achieve the size required and there is no guarantee that it will look the same in other screen sizes.
Oh, got it. Yes, that overlap is annoying, but I was hoping that if the buttons were square, it wouldn’t be as bad as that.
Your short term recommendation is to make the pages scrollable and then move each group down a bit to get it into the screen appropriately, right?
Is there a way to make the text adjust to the resolution of the device?
Unfortunately such feature is not yet available in the DnD platform.
A workaround is to have a general settings page/screen and in this screen have an option to the user to use different font size then you will need to run on all the buttons to update with the selected size.
You can have the code to change the font size of the buttons in the Screen Opens block.
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
