I have a screen that is giving me layout issues.
Right now, the layout consists of a header image, a column with three rows in it and bottom nav bar. Here is what it looks like in design.
Unfortunately, when I go to preview and on a live test on my phone, it comes out looking like this:
Each of the pictures is a button. I have the buttons set to 45% of the screen width and the height is set to relative, 100%. For the life of me, I can’t get them to fill out the screen the way I want them to.
I thought about setting the size in the blocks, but it looks to me like you need to set the size in absolute pixels. There doesn’t appear to be a command to allow you to set the width base on % of screen size and then set the height accordingly.
I’m wondering if I should change out the buttons for images that are clickable. Does anyone think that would have an impact? I’m also wondering if there are any guides available on the way to get the layout to appear the way that it does in the design?
I do need to say that I’ve been saving this project in versions as I go along. I have an older version that formats properly in preview. I’ve gone back through the design elements in each version and the settings appear to be the same. So I’m at a bit of a loss here.
Any assistance would be very much appreciated.
1 Like
Preview and phone aren’t always 100% identical, but that’s especially bad. Question to help you get better help: Is this the legacy (old, non-beta) UI, or the new drag-and-drop UI. I’m guessing legacy, and parts of my answer won’t make sense if I’ve guessed wrong.
Check that your image resize is set to contain. I think I’m seeing some stretching?? ← start here.
I generally avoid ‘fill’ for height. It seems to produce layout gremlins. For width, I prefer 100% instead of ‘fill’ - fewer gremlins.
If tweaking settings doesn’t fix it, you can set absolute sizes and use math blocks (along with screen width and/or height) to make it still be responsive. It’s annoying, but sometimes it’s the best option. Here’s an example from my weekend design challenge entry:
1 Like
It is clearly the Legacy UI and the issue is, most likely, is with the settings of the column and the three rows inside it.
The image in the phone resembles the design but with resized columns/rows. The buttons were “squashed” because they are responding to the column and rows changes.
I tried to set the layout in the blocks and it is coming out even worse. Here are the blocks that I used:
And this is what it now comes out looking like in preview:
I’m relatively new to this but I don’t see why the math doesn’t work. The screen has a header and a nav bar row, in addition to the column with the buttons. I’m setting the column height to be equal to the screen height minus the header and nav bar row heights. I’m then setting the rows in the column to be 1/3 the height of the column. Finally, I’m setting the buttons to be the same height as the rows, 45% of the screen width for their width and then covering them with the background picture. At least, that’s what I think I’m doing. But that’s not what it appears to do in preview.
Thoughts?
1 Like
When I’m trying to debug this stuff, I’ll put a 2 px border in a different color around each design element. That tends to make it clearer what element is just NOT the size it’s supposed to be.
I’d bet a nickel on the problem being that HomeScreenColumn’s height is wrong, probably because HeaderImage’s height value is wrong. Try writing both out to labels on the page, and see if they’re what you expect?
If you need another set of eyes on it, feel free to PM me a link. (You might want to make the screen with the problem into a saved screen and then load it into a new project, if there’s sensitive information elsewhere.)
I made this Bar Chart Demo for a different post but it should demonstrate same principles. Just select a bar number and enter the percentage and the app will show it on screen by changing the height of the column and you can select another bar and give it another height to see that it works as expected.
the trick i use is to define a dummy Label1 and set its width to 100%
then i compute my desired width based on the Label1’s width!
in my case, i’m trying to split the screen size (which is Label1’s width) into 3 parts plus a few pixels for the space between buttons. but i’m computing it in PERCENT notation also!
and i get my buttons evenly spaced whether i’m using my device or using the web preview
you can probably use the same idea for the height or also incorporate the Golden Ratio.
1 Like
I just PM’d you a link to the project. Would love to have you take a look at it.
