Image height not constrained by containers

I’m designing a custom data viewer list layout although technically, this problem has nothing to do with DVLs. I have a screen with an image inside a row inside a column (snap-to-place interface).

Here’s the component tree:

image

If I set the image height to fill container, the row height to 120 (absolute size), and the column height to fit contents, I expect the image to be no larger than 120 pixels high.

This is the Design tab view:

I clone the outer column twice to simulate a Data Viewer List. This is the Preview in a browser:

The images are HUGE even though I have the background resize mode set to contain. Any ideas about how to fix the image height?

If I set the image height manually (e.g. 130 x 130), it looks fine. But I was hoping not to have to specify an exact height.

2 Likes

Hi, I am experiencing the exact same thing with a DVG. The images make the rows much bigger than the screen.
image

The outer row has a height of FIT CONTENTS and a width of 50%, the image has a height and width of fill container and the rest is fill container.
However, when I test it as a DVG:

1 Like

That is a little different though because your outer row is going to be as big as it needs to be to fit everything that’s inside it. And with your internal components having fill container, they are also going to be as big as possible.

With mine, the outer column is set to fit contents so it should shrink to whatever size its contents are. Which could mean it’s small or very large, depending. But the row height is 120 pixels which would limit it to 120 pixels. But it’s previewing with the image expanding past that.

2 Likes

Yeah, there’s that, but it still shouldn’t have blasted like that. When I scroll:
image

Also, since it’s a DVG, there should be 2 icons, but I can only see half of the apple. No sign of anything else, the DVG isn’t horizontally scrollable. Also, I have a - button beside the input but that’s disappeared.

The only solution i found is to set absolute values for images…

The bananas input, and plus and minus buttons are on top of the apple image, while the + and - buttons for apples is under the image.