I am having issues concerning the design of the app and the real result on the app or on the webapp especially on Ios, Safari, … It really a problem because some components are coming a little over other ones and they are not clickable anymore.
on the red rectangle the problems and what I have on the webapp on my computer in black rectangle
on my iphone the issue is on the webapp with safari, on the downloaded app (it is worst) and on chrome a little bit better.
in fact the web preview is ok, the live testing is almost of (except the radius)
the webapp :
on the screen of my computer on chrome : OK , safari : OK
the webapp on my iphone 12: Chrome OK, on safari KO
When you go to any project in your projects screen and choose Project Detail Page
You will notice at the bottom a disclaimer which explains your issue.
So basically, your design has to be geared or focused on your ultimate platform to use. Trying to design for mobile devices will not make it perfect for the web and vice versa
My issue is that I do not have the same behaviour and the device itself depending on the navigator I am using.
The disclaimer is also to say that components are different depending on the device. it is the same with more traditional code.
My second issue is that it is not a problem on how it appears in terms of design but the component that are coming on top of others.
On the design they are really separated. With the drag and drop UI we have less options for responsivness I am wondering where to find “best practices”.
In the meantime I am doing some tests by calculating everything dynamically but I am not sure that it is possible or that it will solve my issue
For the D&D interface, you mostly have to ‘trust’ it to do the responsive design for you. Unlike the older UI (which I’d have thought seriously about using for the layouts you’re showing - I think it would have been easier!), you don’t have a way to set height and width for individual elements using blocks.
The problem you’re showing is that the packing algorithm is ‘guessing’ incorrectly when it resizes your design to fit the screens you’re using. If you want to post a screenshot of the design screen, that might offer some clues to how to fix the packing problem. I’ve observed that packing for elements that shouldn’t be on top of each other is most reliable when the elements are not on top of each other in the design interface, also. That includes NOT ONLY the text/button/whatever, but also the grey box around each one. When you overlap the elements in the design interface, I suspect that Thunkable thinks its OK if they overlap - and it doesn’t know that you were only overlapping invisible margins, not important content. That’s a guess, because I haven’t seen your design screen.
Yeah, I hear you. I hope you won’t have to resort to the older interface to get it working the way you want. I was saying that I thought your layout would have been easier to get to that way, not that I thought you should redo.
Can you post a screenshot of your design screen? (Or a copy link for a problem screen in your project?) Someone might see something you’re missing.
In fact I am setting up the images dynamically in my blocks and make it visible.
I will update this public project tomorrow morning with static assets and make images visible.
I manage to have a result that is not that bad by spacing more the components
I also raised this problem to the support with no feedbacks for the moment.
I checked again and there was no overlap between the components. On an iphone 7 I did have the overlapping and on the 12 yes. I think it is a problem of “flex” options.
I let you know if I have feedbacks from the support team.
Thanks for your help
