questions about pack / flex

[areslagae]

1/ Does flex apply only to boxes or to all widgets?
the manual says A weighting that is used to compare this box with its siblings when allocating remaining space in a box.

2/ In the example below, the label scales to full width in the first case but does not scale to full height in the second case, although the examples are symmetric. Why? (edit: With boxes this does work as I expected. Wouldn't it make sense for all widgets with a width and hight to behave in the same way?)

        self.main_window.content = toga.Box(style=toga.style.Pack(direction='row', height=200, justify_content='center', align_items='center', background_color='gray'), children=[
            toga.Label(style=toga.style.Pack(margin=8, flex=1, background_color='red'), text='label'),
        ])

        self.main_window.content = toga.Box(style=toga.style.Pack(direction='column', width=200, justify_content='center', align_items='center', background_color='gray'), children=[
            toga.Label(style=toga.style.Pack(margin=8, flex=1, background_color='red'), text='label'),
        ])

3/ In the example below, the vertical divider is shown in the first and second case but not in the third. Is there any way to make a vertical divider scale to the hight of the row (determined by the other widgets, in this case the labels)?

        self.main_window.content = toga.Box(style=toga.style.Pack(direction='column'), children=[
            # height specified in containing row
            toga.Box(style=toga.style.Pack(direction='row', justify_content='center', align_items='center', height=32), children=[
                toga.Label(style=toga.style.Pack(margin=8), text='label 1'),
                toga.Divider(style=toga.style.Pack(margin=8), direction=toga.constants.Direction.VERTICAL),
                toga.Label(style=toga.style.Pack(margin=8), text='label 2'),
            ]),
            # height specified width divider
            toga.Box(style=toga.style.Pack(direction='row', justify_content='center', align_items='center'), children=[
                toga.Label(style=toga.style.Pack(margin=8), text='label 1'),
                toga.Divider(style=toga.style.Pack(margin=8, height=32), direction=toga.constants.Direction.VERTICAL),
                toga.Label(style=toga.style.Pack(margin=8), text='label 2'),
            ]),
            # no height specified
            toga.Box(style=toga.style.Pack(direction='row', justify_content='center', align_items='center'), children=[
                toga.Label(style=toga.style.Pack(margin=8), text='label 1'),
                toga.Divider(style=toga.style.Pack(margin=8), direction=toga.constants.Direction.VERTICAL),
                toga.Label(style=toga.style.Pack(margin=8), text='label 2'),
            ]),
        ])

[freakboy3742]

Flex can be applied to all widgets, not just boxes. The "box specific" description is misleading - it should probably say "widget" or maybe "element").

Your "direction" example is an interesting one. The general rule we try to follow is that there should be a direct mapping to HTML and CSS; based on that reading, a label should expand vertically.

In this case I can explain the discrepancy - that the label widget has a fixed intrinsic height (as do most widgets), and that means the widget isn't expanding to the full "flex" height. The question then becomes whether this is a bug in the Label widget, a bug in Pack, or a bug/edge case in the HTML/CSS mapping.

I think the issue with dividers is #1529; the history on that ticket shows there's something complex going there that has defied analysis to date.

[mhsmith]

I haven't worked in this area recently, but don't think HTML/CSS has a concept of an element being totally inflexible in one or both dimensions. If you tell an element to flex, then space will be allocated for it, even if it doesn't choose to draw in that space. If this is correct, then we should change Toga to match. After all, the developer's intention is fairly clear.

[freakboy3742]

Agreed; the major complication (and the main real reason this is even visible) is background color. GUI toolkits tend not to expand the drawable area in the same way that HTML/CSS does, and as a result, the background color underneath a widget doesn't expand. Replicating this behaviour in Toga likely means introducing an empty widget just to support background colors - which is an overhead that I'd prefer to avoid if we can.

The alternative is making sure that the positioning math is consistent, and then documenting the oddity in the extents of background color, on the basis that widget background color is generally something users shouldn't be tweaking if they're going to be building style-guide compliant apps.