Center widget contents of container

[sazeygit]

Hello all,
I would like to center some widget contents of a container class in the following code:

class left_frame(Container)
    def compose(self) -> ComposeResult:
        self.styles.content_align = ("center","bottom")

        yield Container(
            Vertical(
                ...
                ...
                Label("Placeholder Text", id="question"),
                Static("Calculate #"),
                ...
                Button("Fullscreen", id="yes", variant="primary"),
                Button("Draw!", id="no", variant="error"),
                Switch("Fullscreen"),))

class main(App):
    def compose(self) -> ComposeResult:
        yield left_frame()

left_frame().run()

I expect the buttons and switches to be centered but instead the following output is produced:

A noob question but I have been racking my head without success, so thank you for any help.

[davep]

As mentioned when you asked on Discord, this discussion will help: #1919

[sazeygit]

Yes indeed, the linked discussion works on the App class and I was hoping to limit its effects to Container class, i.e. I only want the button and switch widgets in the container to be centered

(apologies if I'm not making myself clear)

[davep]

The solution I give there doesn't work on the App, but instead wraps each element that needs to be horizontally centred in a Horizontal and and styles Horizontal with align: center middle; -- ensuring that each item is in the middle of its container (which in the example is the Screen.

The same approach will work for your app too. For example:

from textual.app        import App, ComposeResult
from textual.containers import Container, Horizontal
from textual.widgets    import Header, Footer, Label, Static, Button, Switch

class Center( Horizontal ):
    pass

class LeftFrame( Container ):

    def compose( self ) -> ComposeResult:
        yield Center( Label( "Placeholder Text", id="question" ) )
        yield Center( Static( "Calculate #" ) )
        yield Center( Button( "Fullscreen", id="yes", variant="primary" ) )
        yield Center( Button( "Draw!", id="no", variant="error" ) )
        yield Center( Switch() )

class SazeyGitApp( App[ None ] ):

    CSS = """
    Static {
        width: auto;
    }

    Center {
        align: center middle;
        height: auto;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        yield LeftFrame()
        yield Footer()

if __name__ == "__main__":
    SazeyGitApp().run()

PS: Switch("Fullscreen") isn't going to work, Switch doesn't take a string.

[sazeygit]

Excellent, thank you for helping out, learnt something new today!

[davep]

Most welcome, glad that helped. 🙂

[dacoders77]

Hi Guys.
Why if i change the width of the blue container, it is aligned in the left instead of the middle? How to align all of the container in the middle even if they have different width?

from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal
from textual.widgets import Header, Footer, Label, Static, Button, Switch

class Center( Horizontal ):
pass

class Center2( Horizontal ):
pass

class LeftFrame( Container ):

def compose( self ) -> ComposeResult:
    yield Center( Label( "Placeholder Text", id="question" ) )
    yield Center( Static( "Calculate #" ), id="stat" )
    yield Center( Button( "Fullscreen", id="yes", variant="primary" ) )
    yield Center( Button( "Draw!", id="no", variant="error" ) )

    # Why this container is aligned on the left? Expect middle
    yield Center2(Label("hor"))

class SazeyGitApp( App[ None ] ):

CSS = """
Static {
    width: auto;
}

Center {
    align: center middle;
    height: auto;
    border: solid red;
}

Center2 {
    align: center middle;
    height: auto;
    border: solid blue;
    width: 50%;
}

"""

def compose( self ) -> ComposeResult:
    yield LeftFrame()

if name == "main":
SazeyGitApp().run()

[davep]

You're asking in an extremely old thread. Perhaps https://textual.textualize.io/how-to/center-things/ would be a better place to start.

[dacoders77]

Worked!