Widget stacks not taking full width

Scriptable
1

Can anybody help me understand what’s going on here? I have included borders around everything - red for stacks, yellow for text (in a stack), and white for images.

The only difference between these two is the width of the iPhone/iPad/Watch icons at the bottom of the pic. If I make them a bit wider as in the top pic, the first two rows don’t extend to the full width, and are therefore not centered properly. Is it a bug? To be clear, there’s no spacer after the stacks on the top two rows, so why is that space there?

image1
image1515×513 43.2 KB

image0
image0503×504 91.8 KB

The summary of what I have is below. All of the spacers are without length, and all of the images have a specified size.

vertical stack, align top
  horizontal stack
    spacer; text; spacer
  spacer
  horizontal stack, align center
    spacer, image, spacer, image, spacer, image, spacer
  spacer
  horizontal stack, align center
    spacer, image, spacer, image, spacer, image, spacer, image, spacer, image, spacer

There is a similar issue here, but no replies.

2

Welcome! Nice clear post. @simonbs only knows for sure but I wonder if the sizes are set after allocating space. What happens if you add the last stack first? Or set .resizable = false in each image and set sizes manually?

1 Like
3

If I duplicate the bottom row at the top I see the same effect - the wide rows are correctly centered, but the shorter ones are still looking left-justified. Same if I just move the bottom row to the top - the top row is now full width, but the two rows below are shorter.

All of the images already had sizes set manually, and adding .resizable = false didn’t help.

4

I think this is because the stacks are left aligned by default and you can change that only with dynamic spacers.

5

I do have dynamic spacers at the start and end of each horizontal stack. You can see below that exactly the same widget shows correctly as a large widget, but incorrectly as a small one. In this version I put another horizontal stack around everything with dynamic spacers at the start and end again.

image0 (1)
image0 (1)838×1280 105 KB

6

After further investigation, I think it is a bug but one with an easy workaround. It happens when you have a bunch of horizontal stacks in a vertical stack, if one of the horizontal stacks is wider that the “screen”. In this case, it is correctly positioned, but effectively changes the left edge from 0 to, say -10 if it was 20px wider than the screen. Other narrower stacks take up the full width, but are offset by that -10, making them appear uncentered.

The fix is to make all of the same horizontal stacks the same width, using a value bigger than the screen. So for example, Size(1000, 0) - leaving the height at 0 so it calculates.

1 Like