Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Label does not align to BOTTOM #828

Closed
saroad2 opened this issue Mar 7, 2020 · 5 comments
Closed

Label does not align to BOTTOM #828

saroad2 opened this issue Mar 7, 2020 · 5 comments

Comments

@saroad2
Copy link
Member

saroad2 commented Mar 7, 2020

I'm trying to show a label on the bottom of the window, but instead, It's showing up on the top.
I made a demo app and the same problem occurs. Here's the demo:

import toga
from toga.constants import COLUMN, BOTTOM, CENTER, LEFT
from toga.style import Pack


class ExampleApp(toga.App):

    def startup(self):
        # Set up main window
        self.main_window = toga.MainWindow(title=self.name)

        # Outermost box
        box = toga.Box(
            style=Pack(
                flex=1,
                direction=COLUMN
            )
        )

        box.add(toga.Label(text="HI", style=Pack(text_align=CENTER,
                                                 alignment=BOTTOM)))

        # Add the content on the main window
        self.main_window.content = box

        # Show the main window
        self.main_window.show()


def main():
    return ExampleApp()


if __name__ == '__main__':
    app = main()
    app.main_loop()

I am using python 3.7 on windows platform using latest toga version (pre-release)
The label "HI" appears on the top center of the window. any help would be much appreciated!
@freakboy3742
Copy link
Member

In this case, Toga is doing exactly what it's being asked to do in this case; however, I can totally see why it would be confusing.

What you've defined is a box, that contains a label; and you've specified that the label is to be at the bottom of it's containing box. The box is set to contain it's content vertically (i.e., as a column).

The catch is that the label has a fixed height, based upon the size of the text for the label itself. In addition, the alignment attribute applies to the children of the element; so in this case, alignment is doing nothing.

So: the layout allocates a 640x16 box for the label (all the available width, and the required fixed height); and then packs that the label the outer box. The net effect is that even though the window is larger, the outer box is only 640x16, and the text appears at the top of the screen.

What you need in your layout is an element that will expand vertically:

        # Outermost box
        box = toga.Box(
            id="box",
            style=Pack(
                direction=COLUMN
            )
        )

        spacer = toga.Box(
            id="spacer",
            style=Pack(
                flex=1,
            )
        )

        box.add(spacer)
        box.add(toga.Label(text="HI", style=Pack(text_align=CENTER)))

In this layout, the spacer provides an element that can expand vertically, giving Pack a reason to put content at the bottom of the box. There's no need for an alignment style; the label is pushed to the bottom because the spacer is set to flexible expansion.

Also, note that (a) the parent doesn't have a flex specified, and (b) the spacer doesn't have a direction. flex is a property that only has significance as a child, and direction only has significance as a parent, so it would be redundant to include them in this layout.

Arguably, the spacer shouldn't be required. The underlying issue in your original design that it requires the layout to expand to all the available space, not shrink to the minimum available space. This would be the equivalent of setting height=100% on an outer container in HTML. If that mechanism existed, putting alignment=BOTTOM on the outer box would also achieve the layout you're looking for, as the box would then expand to all available height, and it's single child (the label) should then be set to the bottom of the layout.

However, Pack doesn't currently have a concept of "100%"; and even then, it would require either an outer box, or the ability to set the height of the "root element". The current root element handling is the same as it is in HTML (by design). If you try to reproduce this layout in HTML flexbox, you'll find that you need 2 layers of boxes to get full page height expansion (or, set height=100% on the <body>).

@saroad2
Copy link
Member Author

saroad2 commented Mar 9, 2020

Thanks for the help! The spacer box solved the problem.

If you want, I can think of a way to implement height=100% as you mentioned. we can implement it as a string constructor like:

Pack(height="100%")

What do you think?

@freakboy3742
Copy link
Member

The difficult part isn't the syntax - it's the interpretation.

Pack has very deliberately avoided issues like percentages because they're complex to implement when combined with fixed measures, flexible measures, etc.

Pack exists mostly as a stop gap measure until Colosseum can be rolled out; both Pack and Colosseum build on Travertino which provides primitives.

Given that viable workarounds exist, I think I'd rather see effort go into making Colosseum useful, rather than trying to making Pack more complex.

@saroad2
Copy link
Member Author

saroad2 commented Mar 10, 2020

No problem, closing the issue.

@saroad2 saroad2 closed this as completed Mar 10, 2020
@mhsmith
Copy link
Member

mhsmith commented Feb 27, 2023 •
edited
Loading

The expansion of the root box to 100% of the window was implemented in #1778.

However, the above comments are based on a misunderstanding of how alignment works. It only affects the cross axis (left/right for columns, top/bottom for rows). To bottom-align all the children of a column box would require control of the main axis, such as the justify-content property discussed in #1194. Or to bottom-align only some of the children would require either a spacer as shown above, or support for auto margins as shown here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@freakboy3742 @mhsmith @saroad2