I’m having issues with layout in an app I’m building with the kids I coach. I’ve built a minimalist example that illustrates the problem here: Thunkable
UPDATE: I can reproduce the problem even without switching images, as shown in post #6 (below). It’s a problem with setting height to “fit contents” for an image. Does no one else want their images to be full width and the ‘right’ height to hold the image?
Original post continues below:
Basically, the layout switches between images, which are different sizes. Each image needs to be at the top of the screen, without a bunch of extra padding. Here’s what I get in Thunkable Live (on iPhone). The webviewer result is similar. The yellow is the column containing the image and buttons below it. The red is the border on the image. The actual image is the dragon/balcony with the black outline showing the actual image border. The extra padding appears both above and below, but I’ve got padding and margins set to 0.
And here’s how it looks on my design screen - I’m not coding extra space!
A few settings that might be relevant:
COLUMN: height is set to fit contents. The width is set to 100%. Vertical alignment is set to top.
IMAGE: Picture resize mode is contain, height is fit contents, width is fit contents. In the advanced tab, sizing is set to flex, maxWidth is 100%, and maxHeight is 80%.
Can someone help me understand what I’m doing wrong, and better yet, how to fix it?