First thought this would be a simple issue but turns out it's more complicated than I thought.
This is because on iOS, Jasonette uses a layout API called UIStackView, and uses a fill type distribution, so that every component without a dimension will automatically get stretched or squished to make it easy to write the markup.
But turns out that it's not as simple as that. Upon investigation I learned today that
"it will keep all but one of the controls at their natural size and stretch one of them to fill the space."
This is why when you have two
space components, only one of them gets stretched and the other one gets shriveled down to 0 width, hence its lack of appearance.
I tried to come up with a quick solution but since this is how the native UIStackView works, it will probably require some thought, and I don't want to break the layout engine that's mostly working, by experimenting on it for now. I will try to think of a nice solution for this.
Please feel free to add this as a github issue.
That said, in the meantime here's a solution:
Instead of using spaces with no width, you could specify their widths using the percentage & pixels dimension expression. Here's the formula:
- Because we're trying to center the two buttons, and we know the total widths of the two buttons are 200,
- We can calculate that the rest of the space should be
100%-200-20 (the last 20 is for the automatically added padding, but if you set the padding to 0, it would be
- Now, since we want equal widths for the two spaces, we can get their widths with
(100%-200-20)/2, which would be
So you can add two spaces with
"width": "50%-110" and it should give you the desired behavior. Here's a quick modification of your original markup: https://jasonbase.com/things/xDoX Here's what it looks like: