Alignment issues

Hi,
I'm creating a Weather forecast App and I've encountered an alignment issue. Each Orange rectangle is a VerticalArrangement with a width of 18%.

On Android, all the elements display as I wish/designed.
On the iPhone, only 4 Horizontal Arrangements appear and on the rightmost is squished. Also, the topmost icon in green square is also squished.

This VerticalArrangement(in green square) is with height on auto.
image

Image6 is squished sun image(in green square), both width / height are all auto.
image

Label6 is the date/time and temperature with width/height on auto.
image

Is this a known bug on iOS?

Stonez56

Try setting all of them to fill_parent. They should automatically adjust their widths.
Also try setting the sizes in blocks instead of the designer.

On iPhone SE; iOS 15, width from 18% to automatic:
image
Update width from 18% to fill parent:
image

.................................................................................

I borrowed an iPad with iOS 17.
image
image
.................................................................................
I added VerticalArrangement background color in each cell to see what had happened.
image

All weird results... :sweat_smile:

Stonez56

Automatic or fill_parent?

Sorry, I forgot to mention. They are set as fill parent.

Strange behavior of the iPhone. I would also try changing the width in blocks, I saw posts somewhere where someone showed that something works from blocks, but does not work from the designer.

This may be caused by the Label containing the time and date. It apparently doesn't want to break the line to a new line. Maybe try setting the Label width to fill_parent or 18%.

Still, not working.
I intended to break the time in a newline, but they appeared the same.
image

Stonez56

Previously there was no year, the date looked like this: 12-26. Now you moved the time to a new line, but the year 2024-12-26 appeared in the date, so the text still does not fit on the screen. You also changed the time format from 00:00 to 00:00:00, I don't think anyone needs seconds when checking the weather...I would also adjust the font size, as it is too large for the iPhone's capabilities.
There is no automatic font size adjustment in appinventor. You have to set everything yourself. Although sometimes it requires extensions which is not possible in the case of ios. You have to set a safe small font.

Right...I updated the date/time to be shorter, but now the middle three become smaller..
image

Changed the label width to both 18% and fill-parent. The result didn't change; just like the screenshot above.
image

Thanks for taking the time to look into this!
I 'm probably going to call it a day.

Stonez56

Are all labels and all arrangements set to the same width? Because you are only showing label1.

Yes, all set the same width of 18% and fill parent.

Post the AIA (or send it to me via PM). I can view it on some of my iOS test devices...

1 Like

Hi Anke,
I just sent you .aia file! Thanks!

Stonez56

LGTM...

(left: Pixel 7 Pro, right: iPhone 15 Pro Max)

@Anke The alignment issue was in main screen, not screen1.
Please look at the main screen.

image

Stonez56

Again LGTM on iPhone 15 Pro Max:

1 Like

You are using an ancient iPhone model. A few small adjustments are required to display the elements properly there as well.

Here is a screenshot from an iPhone 6s (before and after the adjustments):

Here they are:

and maybe this (so you don't need to scroll to see/press the button):

2 Likes

Oh...it was the old iPhone issue...
After I adjust the label width 18% with blocks, they look much better, but the first one still slightly bigger.
image

Blocks:


I think this acceptable for now! :slight_smile:

Not sure, if you can take look at the ListView? I have all the weather data in ListView, but it won't show up on iOS. On Android, all weather data showed up.

This block already processed all the data element for ListView and on Android, they showed.

Thank you very much!
Stonez56

You must also adjust the image widths, as I've shown.

So please debug your blocks!