beeware / beeware/toga

Align_items doesn't fill space correctly with cross-axis dimension and direction != parent.direction

Open
#3,274 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
Python
Stars
5.4k
Forks
827
Avg merge
9h 45m
Merged PRs (30d)
58

Description

### Describe the bug

In a box whose cross-axis dimension is set explicitly and whose parent is the opposite direction, `align_items = START` works correctly, but `CENTER` and `END` don't. The children align properly relative to each other, but only within the amount of cross space they would have taken up with `START`.

### Steps to reproduce

1. Create a box, either a row or a column, and give it children.
2. Give it a fixed dimension in its cross axis.
3. Add it as a child of a box with the *opposite* direction.
4. Set `align_items` to either `CENTER` or `END`.

Try it out with this example app: https://gist.github.com/HalfWhitt/b8ccc0d93727c49bae0cfe4532c1e599

### Expected behavior

The center- or end-aligned children should be placed at the center or end-side of the box.

### Screenshots

![Image](https://github.com/user-attachments/assets/204a8a69-9991-48ab-9fa8-36d3869046e6)

![Image](https://github.com/user-attachments/assets/7badf6ab-d8ee-4206-9bb4-5020a201fe61)

![Image](https://github.com/user-attachments/assets/8d526333-1033-40a1-9067-7e637f3fc402)

### Environment

I thought this was a new bug at first, but it applies to `alignment` as well, at least as far back as 0.4.0.

### Logs

_No response_

### Additional context

This is just before pass 4 of the layout algorithm:

https://github.com/beeware/toga/blob/bcc202897dbe92e34b0a5b78118a1ae3fb3634d0/core/src/toga/style/pack.py#L819-L820

Setting it *unconditionally* to the larger value ensures that the children move to center/end within the available space. But this, of course, breaks other things... I haven't stared at the algorithm long enough to fully grok the proper fix.

Contributor guide

Open the contributing guide

Research direction

Reproduce the layout with the linked example app: use a fixed cross-axis dimension, opposite parent direction, and CENTER or END alignment. Start at core/src/toga/style/pack.py around lines 819-820 and trace the layout algorithm before pass 4. Done means center- and end-aligned children occupy the expected center or end-side of the box without breaking START alignment.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
desktop
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.