Help with creating FLEXible content

[Resonanz]

DOCUMENTED CODE BELOW (runs on Windows 10)

Hi guys, I cannot seem to be able to get the following code to do what I want.

Questions

1. Why is the transparent PNG "DummyHeader.png" not allowing the background thru (background_color=BLACK)? Is PNG transparency supported?
2. DummyHeader.png image will expand and contract nicely with window size, and wonderfully extends to full window width using the Flex=1 option. How do I make the sidebar (background = DARKGRAY) go to the bottom of the window? (With the bees present, I cannot get the DARKGRAY to extend to the bottom.)

4. How do I get the RHS (LIGHTGRAY) area to expand to fill the entire remaining area? I cannot seem to get Flex to do the job WHEN THE AREA CONTAINS CONTENT.
5. If I drag the window side to make in narrower (with the textboxes present), what is limiting the width from going to zero? I like the behavior as it is enforcing a minimum window size, but why? It seems to be limited by the textbox width.
6. If I comment out the 4 + 5 lines that show the sidebar and RHS "children" content, then Flex seems to kick in and the background grays go right to the bottom and RHS of the window as expected.

import toga
from toga.constants import COLUMN, ROW, BLACK, DARKGRAY, LIGHTGRAY, CENTER
from toga.style import Pack


class DividerApp(toga.App):
    def startup(self):
        # Window class
        #   Main window of the application with title and size
        self.main_window = toga.MainWindow(title=self.name, size=(600, 650))

        #
        # Header image and styling - This is a PNG with transparent background
        #
        header_image = toga.Image("DummyHeader.png")
        header_image_style = Pack(padding=(0,10,0,10), height=100)

        #
        # Sidebar image and styling
        #
        sidebar_image = toga.Image("brutus.png")  # Image is a resource, ImageView is a widget
        sidebar_image_style = Pack(padding=10, width=40, height=40)

        #
        #  Textbox styling
        #
        textbox_style = Pack(padding=10, width=300, height=30)

        #
        # Header image - package into Box
        #
        box_header = toga.Box(
            children=[
                toga.ImageView(header_image, style=header_image_style)
            ],
            style=Pack(direction=ROW, alignment=CENTER, background_color=BLACK, flex=1)  # <<< FLEX = 1
        )

        #
        # Sidebar images - package into Box
        #
        box_sidebar = toga.Box(
            children=[
                toga.ImageView(sidebar_image, style=sidebar_image_style),
                toga.ImageView(sidebar_image, style=sidebar_image_style),
                toga.ImageView(sidebar_image, style=sidebar_image_style),
                toga.ImageView(sidebar_image, style=sidebar_image_style)
            ],
            style=Pack(direction=COLUMN, padding=0, background_color=DARKGRAY, width=150)
        )

        #
        # Main RHS content - package into Box
        #
        box_content = toga.Box(
            children=[
                toga.ImageView(sidebar_image, style=sidebar_image_style),
                toga.TextInput(placeholder="Enter some text here...", style=textbox_style),
                toga.TextInput(placeholder="Enter some text here...", style=textbox_style),
                toga.TextInput(placeholder="Enter some text here...", style=textbox_style),
                toga.TextInput(placeholder="Enter some text here...", style=textbox_style)
            ],
            style=Pack(direction=COLUMN, padding=0, background_color=LIGHTGRAY, flex=2)
        )

        #
        # Sidebar + RHS content - package into Box
        #
        box_body = toga.Box(
            children=[
                box_sidebar,
                box_content
            ],
            style=Pack(direction=ROW, padding=0)
        )

        #
        # Header + Sidebar + RHS content - package into Box
        #
        # box_meta
        self.main_window.content = toga.Box(
            children=[
                box_header,
                box_body
            ],
            style=Pack(direction=COLUMN, padding=0)
        )

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


def main():
    # Application class
    #   App name and namespace
    app = DividerApp("Dividers", "org.beeware.helloworld")
    return app


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

[freakboy3742]

Q1. This appears to be a bug on Windows. I'm not sure why it isn't honoring background transparency; it does on macOS. I've opened #1665 to track this problem.

Q2 is somewhere between a bug and feature. The Pack algorithm is doing right thing as currently defined; however, there's definitely debate to be had over whether that's the right thing. You're not the first person to hit problems like this one.

The core of the issue here is that Pack has inherited a bunch of behavior from web browsers, which primarily interpret documents as a page of fixed width, but arbitrary height, with the assumption that a vertical scrollbar will be the preferred handling for content overflow; however, in the context of app layout, the height of the document is an important constraint. CSS has mechanisms to handle this, but Pack hasn't fully inherited those mechanisms.

As a result, when you have a box that contains children whose height is all fix collection of boxes with a fixed height in a column, the containing box has it's height constrained to the fixed height of it's children. The workaround is to add a box into the column that is flexible, so that box can expand to fill the available vertical space.

Q4 - If you remove the fixed width from textbox_style, it will become flexible, and will expand to the width of the window.

Q5 is a "feature"; Toga won't allow a window to be smaller than the minimum size required by the layout. In your case, you've described a fixed width requirement on TextInputs; Toga is honoring that and preventing the window from being any smaller than that. The fix here is to avoid hard-defined width/height definitions unless you really mean it.

Q6 is a different manifestation of Q2. When you take the fixed height elements out of the layout, there's no children influencing the height/width of the vertical box; as a result, the box fully participates in the layout, expanding to the available height.