# Layout visual issue with rows

**URL:** <https://community.thunkable.com/t/layout-visual-issue-with-rows/547241>\
**Category:** Questions about Thunkable X\
**Created:** [March 31, 2020, 11:44am UTC](https://community.thunkable.com/t/layout-visual-issue-with-rows/547241 "2020-03-31T11:44:55Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![peter.castledenbu88](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@peter.castledenbu88](https://community.thunkable.com/u/peter.castledenbu88)\
**Post date:** [March 31, 2020, 11:44am UTC](https://community.thunkable.com/t/layout-visual-issue-with-rows/547241/1 "2020-03-31T11:44:55Z")

</div>

Hey guys,

I’m struggling with a styling issue with my rows.

I’ve created a top row (with 30px absolute height) to house my screen title and a hamburger icon, and a row below set to full container vertically.

In the design dashboard itself, it is rendering correctly

 ![Screenshot 2020-03-31 at 13.22.00](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/2/820a5a67823812bedfb6e318c29d2a2c599bf706.png)

but when I preview via the Thunkable app,

 ![IMG_20200331_132301](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/f/4feec372e7b49a75c65ff5c7d73390f748845461.jpeg)

I’m seeing that my top row isn’t quite at the top.

I’ve attached two images to demonstrate.

Do you have any suggestions?

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 31, 2020, 12:14pm UTC](https://community.thunkable.com/t/layout-visual-issue-with-rows/547241/2 "2020-03-31T12:14:59Z")

</div>

Is that your status bar? Like where the signal/battery status goes?

---

<div class="post-metadata">

**Author:** ![peter.castledenbu88](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@peter.castledenbu88](https://community.thunkable.com/u/peter.castledenbu88)\
**Post date:** [March 31, 2020, 1:07pm UTC](https://community.thunkable.com/t/layout-visual-issue-with-rows/547241/3 "2020-03-31T13:07:48Z")

</div>

Here’s the full screen shot where I’d cropped it before.

 ![IMG_20200331_145016](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/e/1e0e04c367201ec821759c7e3df015c970e98ea9.jpeg)

I have no idea if that’s where the time/wi-fi status would sit.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 31, 2020, 1:14pm UTC](https://community.thunkable.com/t/layout-visual-issue-with-rows/547241/4 "2020-03-31T13:14:28Z")

</div>

Did you set the absolute top offset to 0px? You can’t leave it default.

Also, @peter.castledenbu88, thanks for posting this to the community and welcome 👋

---

<div class="post-metadata">

**Author:** ![peter.castledenbu88](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@peter.castledenbu88](https://community.thunkable.com/u/peter.castledenbu88)\
**Post date:** [March 31, 2020, 1:31pm UTC](https://community.thunkable.com/t/layout-visual-issue-with-rows/547241/5 "2020-03-31T13:31:42Z")

</div>

Thanks Jared

I can’t seem to find “top offset” in the settings (or documentation). For the row component, I can see “EdgeOffsets” and when I set that to 0px rather than blank, the problem persists.

I have a work-around solution where I set the colour of my second (bigger) row to what I was using as my screen background colour - and then set my screen background colour to the same as my top row. This removes the top stripe but leaves the components within my top row no longer centred vertically.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 31, 2020, 1:43pm UTC](https://community.thunkable.com/t/layout-visual-issue-with-rows/547241/7 "2020-03-31T13:43:50Z")

</div>

Have you downloaded the app to your phone. I don’t experience this isssue. Is there a margin on that top row?

I could share a template with you if you’d like

---

<div class="post-metadata">

**Author:** ![peter.castledenbu88](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@peter.castledenbu88](https://community.thunkable.com/u/peter.castledenbu88)\
**Post date:** [March 31, 2020, 2:25pm UTC](https://community.thunkable.com/t/layout-visual-issue-with-rows/547241/8 "2020-03-31T14:25:22Z")

</div>

I’ve tried to make another screen altogether within my drawer navigator, and now the problem has gone. For the life of me I can’t see why there is a difference between this one and the previous one.

Sorry if I wasted your time!

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 31, 2020, 2:28pm UTC](https://community.thunkable.com/t/layout-visual-issue-with-rows/547241/9 "2020-03-31T14:28:19Z")

</div>

Not a waste! You had a problem and you’ve started to figure it out! There must be some weird setting that got changed.

And changing background color messes with the positioning/justification of components?

Great work @peter.castledenbu88!!!

---

<div class="post-metadata">

**Author:** ![peter.castledenbu88](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@peter.castledenbu88](https://community.thunkable.com/u/peter.castledenbu88)\
**Post date:** [March 31, 2020, 2:33pm UTC](https://community.thunkable.com/t/layout-visual-issue-with-rows/547241/10 "2020-03-31T14:33:20Z")

</div>

I suspect the problem was layers of components within components: image inside a button inside a row, inside row, inside screen, inside Drawer navigator…and I resized one of these components incorrectly which threw the whole thing out.

Thanks for your time

---

<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, 11:39am UTC](https://community.thunkable.com/t/layout-visual-issue-with-rows/547241/11 "2024-11-08T11:39:33Z")

</div>


