# Layout bug when previewing

**URL:** <https://community.thunkable.com/t/layout-bug-when-previewing/1747234>\
**Category:** Questions about Thunkable X\
**Tags:** layouts\
**Created:** [February 22, 2022, 2:07am UTC](https://community.thunkable.com/t/layout-bug-when-previewing/1747234 "2022-02-22T02:07:46Z")\
**Posts on this page:** 4\
**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:** [February 22, 2022, 2:07am UTC](https://community.thunkable.com/t/layout-bug-when-previewing/1747234/1 "2022-02-22T02:07:46Z")

</div>

Project link: [Thunkable](https://x.thunkable.com/copy/66d851196f3b2a88f871f36d27888343)

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

I have a layout set up like this next screenshot, with Column1 (orange) set to 80 pixels height and Button1 (green) set to 80 pixels height and 60 pixels width inside Row1 (no color) set to Fit Contents height that is then inside Column2 (yellow) set to Fit Contents height. All column and row widths are set to Fill Container.

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

Below is the Live Test in Thunkable Live on the left and the browser Preview on the right:

 ![IMG_2496](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/3/637145402f4105d12469cde192ef3143e0614902.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/9/2920cd4cf81d4bd90ca4a76ea200d5650a1d4b6e.png)

Why are these so different? I would expect both screenshots to look like the Thunkable Live screenshot on the left. **It seems like the browser Preview is not respecting the height properties for any of the row or column components.**

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 22, 2022, 2:40am UTC](https://community.thunkable.com/t/layout-bug-when-previewing/1747234/2 "2022-02-22T02:40:43Z")

</div>

If I remember correctly, there is a layout bug when using a specific size in one side and `Fill container` in the other. You need to set the `width` to `relative 100%`. The screen `scroll` should be false too.

---

<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:** [February 22, 2022, 3:07am UTC](https://community.thunkable.com/t/layout-bug-when-previewing/1747234/3 "2022-02-22T03:07:57Z")

</div>

Yes, you’re correct. Scrollable was false but when I change the width to relative 100%, it fixed the preview issue.

Also reported here: [Previewed row & column heights aren't accurate · Issue #1121 · thunkable/thunkable-issues · GitHub](https://github.com/thunkable/thunkable-issues/issues/1121)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [May 23, 2022, 3:08am UTC](https://community.thunkable.com/t/layout-bug-when-previewing/1747234/4 "2022-05-23T03:08:42Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.