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.

[areslagae]

Hi all,

I keep running into (for me) unexpected flex behavior.

Please consider the example below.

1: When removing the height=100 on the line indicated with 1 the yellow column disappears. It seems the column cannot figure out the height of the row it is in, although it should be clearly 100 because of the other column.

Is this behavior consistent with the documentation of flex, more specifically "Once fixed space allocations have been performed, this box will assume flex / (sum of all flex for all siblings) of all remaining available space in the direction of the parent's layout."

2: The example (with the height=100) works regardless of the Column indicated with 2 in the code below. However, commenting the column changes the "direction of the parent's layout". Again, is this compatible with documentation cited above?

Thanks for you consideration,

import toga
from toga.style import Pack

class App(toga.App):

    def __init__(self):
        super().__init__(formal_name='formal_name', app_id='app_id')

    def startup(self):
        self.main_window = toga.MainWindow()
        self.main_window.content = (
            toga.Column(children=[
                toga.Row(style=Pack(height=100), children=[ # 1: when removing height=100 the yellow column disappears
                    toga.Column(style=Pack(height=100, width=16, background_color='purple')),
                    toga.Column(children=[ # 2: impact of this column on the flex below? 
                        toga.Column(style=Pack(flex=1, width=16, background_color='yellow'))
                    ]),
                ])
            ])
        )
        self.main_window.show()


app = App()
app.main_loop()

[mhsmith]

Please post screenshots of both issues.

1. Sounds like it might be related to Cross-axis alignment and stretching bugs #2213.
2. I don't understand what you mean – what exactly changes?

[areslagae]

with height=100:

without height=100:

Please ignore 2 for now, I need to look into this further

[mhsmith]

Thanks, I don't have time to look into this at the moment, but I'll leave a link on #2213.