Cross-axis alignment and stretching bugs
- 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()
```
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:
Contributor 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