# Image height not constrained by containers

**URL:** <https://community.thunkable.com/t/image-height-not-constrained-by-containers/1344974>\
**Category:** Questions about Thunkable X\
**Created:** [June 14, 2021, 10:08pm UTC](https://community.thunkable.com/t/image-height-not-constrained-by-containers/1344974 "2021-06-14T22:08:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [June 14, 2021, 10:08pm UTC](https://community.thunkable.com/t/image-height-not-constrained-by-containers/1344974/1 "2021-06-14T22:08:54Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/1/d1b980dd1bbaf0b3aade88c9ced5861f44774a98.png)

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:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/9/199ad8c0be3c254f60d76082cee9aff6cecc16e6.png)

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

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/a/aa61ce4a40dd55eb2f4c0d4596895ed2240124e2.png)

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.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 15, 2021, 3:08am UTC](https://community.thunkable.com/t/image-height-not-constrained-by-containers/1344974/2 "2021-06-15T03:08:06Z")

</div>

Hi, I am experiencing **the exact same thing** with a DVG. The images make the rows much bigger than the screen.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/7/c7ccbd28fa7310c89fb289e6fd2ed1e1a818bdca.png)

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:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/e/4eb5a4723056be6cd54b5222942844b578eda441.jpeg)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [June 15, 2021, 3:36am UTC](https://community.thunkable.com/t/image-height-not-constrained-by-containers/1344974/3 "2021-06-15T03:36:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 15, 2021, 4:39am UTC](https://community.thunkable.com/t/image-height-not-constrained-by-containers/1344974/4 "2021-06-15T04:39:38Z")

</div>

Yeah, there’s that, but it still shouldn’t have blasted like that. When I scroll:  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/a/ba61b676abe6cb5cabfd76101d51aadf8383cc17.png)

Also, since it’s a DV **G** , 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.

---

<div class="post-metadata">

**Author:** ![mimostel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mimostel/32/107661_2.png) [@mimostel](https://community.thunkable.com/u/mimostel)\
**Post date:** [June 15, 2021, 5:09am UTC](https://community.thunkable.com/t/image-height-not-constrained-by-containers/1344974/5 "2021-06-15T05:09:37Z")

</div>

> [@The browser sometimes stops working with the application and shows a white screen](https://community.thunkable.com/t/the-browser-sometimes-stops-working-with-the-application-and-shows-a-white-screen/1344866/2):
>
> For me same thing… i couldnt work on my project all day… In the best case scenario, im working on blind, cause i cant see anymore changes to ThunkableLive mobile app. There it shows old stuffs i did long time ago. Its like server dont have connection with mobile LiveView anymore… I think that the problems with Thunkable server are more seriouse that i thought frowning More problems happened to me in the last hour… Even if i make from the scratch a new screen in my project, with a simple con…

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

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 15, 2021, 5:19am UTC](https://community.thunkable.com/t/image-height-not-constrained-by-containers/1344974/6 "2021-06-15T05:19:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:20pm UTC](https://community.thunkable.com/t/image-height-not-constrained-by-containers/1344974/7 "2024-11-08T13:20:17Z")

</div>


