🔥 URGENT: Layout Looks Great in Editor/Desktop, But Breaks on Tablet Device

💬 App Building
,
1

1) My goal:
To make the tablet app look exactly like it appears in the Retool editor — same layout, spacing, and alignment. This is a simple app for logging metal scrap by department and weight, meant for warehouse use on tablets.

:warning: This is extremely time-sensitive. We’re actively trying to roll this out in a live warehouse environment, and layout issues are blocking us from going live. Any help would be greatly appreciated ASAP.

2) Issue:
In the editor and desktop viewer, the layout looks exactly how I want it. But when I open it on an actual Android tablet using the Retool native app, the layout shifts — spacing between components gets thrown off, alignment breaks, and the design no longer matches what I built.

3) Steps I've taken to troubleshoot:

  • Tested in both portrait and landscape orientations on the tablet
  • Checked container widths, padding, and alignment settings
  • Verified display scaling is default on the device
  • Confirmed this issue happens in the Retool native mobile app

4) Additional info:

5) App File for Review:
If it helps with troubleshooting, I’ve attached the following export from the app:

Let me know if I should DM or email this file instead.

:bangbang: URGENT QUESTION:
Is there a reliable way to get exact layout parity between what I see in the editor and what appears on the tablet via the Retool app? Any known layout quirks, configuration tips, or limitations that I should be aware of?

We’re really under pressure to deploy this live and need a solution urgently.

Thanks in advance — any help is appreciated!

2

Hey @JasperCreationss - thanks for reaching out. It looks like setting the Width property of LeftPanel to Fixed is the primary issue. You probably want both RightPanel and LeftPanel to fill the available space, instead. By default, each will take up 50% but you can adjust this ratio via the Width factor of each. Something like a 1:3 ratio looks good to me. :+1:

image
image1290×698 40.8 KB

I'm not sure precisely why it ends up looking so different on the actual device - there might be an underlying issue with mixing Fixed and Fill widths. I'll do some additional investigation and follow up here. I hope the above unblocks you, though!

3 Likes
3

@Darren This was exactly the fix I was looking for — thanks a ton! :raised_hands:

Now that you pointed it out, I have a much clearer understanding of what the width factor actually does and how it affects layout distribution between panels. I was definitely tripping myself up by mixing Fixed with Fill.

Appreciate the help — this unblocked me in a big way!