beeware / beeware/toga

Cross-axis alignment and stretching bugs

Open
#2,213 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
Python
Stars
5.4k
Forks
827
Avg merge
15h 39m
Merged PRs (30d)
40

Description

This is related to #1194, but I'm creating a separate issue because I think it's a bug rather than an enhancement.

According to CSS, the default value of `align-items` in a flexbox is supposed to be `stretch`. But Toga doesn't even accept that as an option. This is an obvious omission which we should fix.

Despite that, and despite the Toga documentation saying `start` is the default alignment, the default behaviour is already `stretch` – at least some of the time.

```py
import toga
from toga.style import Pack
from toga.style.pack import COLUMN, ROW

class HackdaysAIApp(toga.App):
def startup(self):
main_box = toga.Box(
style=Pack(direction=COLUMN),
children=[
toga.Box(style=Pack(height=40, background_color="cyan")),
toga.Box(
style=Pack(direction=ROW, background_color="pink"),
children=[
toga.Box(style=Pack(flex=1, height=150, background_color="lime")),
toga.Box(style=Pack(width=40, background_color="orange")),
],
)
],
)

self.main_window = toga.MainWindow(title=self.formal_name)
self.main_window.content = main_box
self.main_window.show()

def main():
return HackdaysAIApp()
```

Screenshot 2023-11-08 at 18 22 25

The cyan box is a child of a top-level COLUMN, and it's being stretched to fill the cross axis.

The orange box is a child of a second-level ROW, but it's not being stretched in the cross axis, which is why it's collapsing to nothing, and the pink parent is visible in the space where it should be.

From experimentation, I think this is down to whether the container's cross-axis size is externally-determined, or if it's shrinking to fit its content. For example, if you add either `height=150` or`flex=1` to the ROW box, then the orange box will appear. And of course, the top-level COLUMN box's size is also externally-determined because it's forced to fill the window.

The web backend uses CSS, so it displays the correct layout:

Image

Contributor guide

Open the contributing guide

Research direction

Start by running the Python example in the issue and compare its native layout with the web backend's CSS result. Trace how Toga handles cross-axis sizing and the missing `stretch` value; done means the orange child stretches as expected and `align-items: stretch` is accepted without breaking the documented defaults.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, python
Domain
desktop, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.