Layout visual issue with rows

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

but when I preview via the Thunkable app,

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?

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

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

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

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 :wave:

1 Like

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.

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

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!

1 Like

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!!!

1 Like

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

2 Likes