How on earth can I make Pack(alignment=CENTER) get to work !?

[Varisox137]

As title, currently my app seems just never works with alignment options (not only CENTER).
e.g. a 480px COLUMN box always sticks to the top of a 640px main_window
i know there's some workaround by setting padding, but that would be a bit complicated, having to calculate window-height, not to mention i have multiple scene layout (thus multiple top-layer boxes) to set one by one......
any hint on the problem?

heres what my code look like (for each scene):

[freakboy3742]

It's a very difficult to provide advice on why a layout isn't working when it's not clear exactly what you're trying to do.

It sounds like you want the 2 buttons to be aligned on the centre of the screen, but it's not clear what you mean by "centre". Do you mean the two buttons above each other, with spacing above and below? Or do you mean 2 buttons side by side, with spacing above and below.

That said - the example code you've provided won't be doing either of those things. alignment=CENTER defines the alignment of the children of the box to which the style is applied, and applies in the cross axis to the axis of layout. So - the centering you've specified would be horizontal centering, not vertical entering. You haven't provided any details about the styling of the buttons; but by default, they'll be expanding to the width of the column, so "centering" is a moot point.

At the very least, you'll need 1 more box to wrap the buttons; it's that box that gets centered inside the outer box. The direction of the inner and outer boxes will control what direction the centering occurs.

The other thing worth flagging is that we are aware of some bugs in the current stable release regarding the extents of the outer box; these should all be fixed once #2020 lands.

(As an aside - providing code samples as images is really awkward, as it's not possible to copy-and-paste your example code. Github Markdown of code is a lot more useful from a debugging point of view - triple single quotes around a block of code will render it as a code sample)

[Varisox137]

thx really much~~
have never realized that the Alignment style goes perpendicular to the box direction...... my fault.

but still can't get the ideal layout anyway......
here's my code:

self.main_window.content=(
    outer:=toga.Box(
    |   style=Pack(direction=ROW,alignment=CENTER),
    |   children=[
    |       inner:=toga.Box(
    |       |   style=Pack(direction=COLUMN,alignment=CENTER),
    |       |   children=[
    |       |       self.enter_login_scene_button,
    |       |       self.enter_offline_scene_button
    |       |   ]
    |       ),
    |   ]
    )
)

with a following print(outer.layout,inner.layout)

and currently the thing looks like:

what's next?

[Varisox137]

while what i really want to have is something like this-->
(done with padding)

would like to have full-length buttons, together they are vertically centered in the window

[mhsmith]

To use the full width, the inner Box needs to have a flex attribute, like this:

        self.main_window.content=(
            outer:=toga.Box(
               style=Pack(direction=ROW, alignment=CENTER),
               children=[
                   inner:=toga.Box(
                      style=Pack(direction=COLUMN, alignment=CENTER, flex=1),
                      children=[
                          self.enter_login_scene_button,
                          self.enter_offline_scene_button
                      ]
                   ),
               ]
            )
        )

This gives the desired layout with the current development version of Toga. However, it might not work with the stable version, in which case you can try using spacer boxes above and below, which I think is easier to understand anyway:

        self.main_window.content=(
            outer:=toga.Box(
               style=Pack(direction=COLUMN),
               children=[
                    toga.Box(style=Pack(flex=1)),
                    self.enter_login_scene_button,
                    self.enter_offline_scene_button,
                    toga.Box(style=Pack(flex=1)),
               ]
            )
        )

For possible future improvements to this area, see #1194.

[Varisox137]

well...tried your first attempt, still dont work

the second method (by adding space-consuming empty boxes) worked.
might as well take this idea and finish the discussion...gotta fix som more deadly issues

a great thanks for all maintainers！

[mhsmith]

To use the full width, the inner Box needs to have a flex attribute, like this:

        self.main_window.content=(
            outer:=toga.Box(
               style=Pack(direction=ROW, alignment=CENTER),
               children=[
                   inner:=toga.Box(
                      style=Pack(direction=COLUMN, alignment=CENTER, flex=1),
                      children=[
                          self.enter_login_scene_button,
                          self.enter_offline_scene_button
                      ]
                   ),
               ]
            )
        )

This gives the desired layout with the current development version of Toga. However, it might not work with the stable version, in which case you can try using spacer boxes above and below, which I think is easier to understand anyway:

        self.main_window.content=(
            outer:=toga.Box(
               style=Pack(direction=COLUMN),
               children=[
                    toga.Box(style=Pack(flex=1)),
                    self.enter_login_scene_button,
                    self.enter_offline_scene_button,
                    toga.Box(style=Pack(flex=1)),
               ]
            )
        )

For possible future improvements to this area, see #1194.