[Q] Setting a center middle aligned widget's offset

[anzhi0708]

Hi there :3

I have a container Screen and its align attriute was set to center middle; in CSS file.

So its children widgets will be placed at the center (both x and y) of the screen.

Now, I'm adding a sidebar with animation to this Screen by modifying its offset-x and transition.

I could not figure out the value to set for offset-x, cause the sidebar component was set as center middle in the first place.

If I set offset-x to -100% then animate it to 0%, the position was wrong.

Send help pls :3

[anzhi0708]

Is there a way to set the sidebar's align independently? Maybe I can set it to the left side of the screen first. But I'm not familiar with CSS and could not figure out how. :-(

[davep]

I think what you're trying to do here is an ideal use for layers. If I'm doing something like this I tend to wrap each "collection" of things that need to work together in a main container, and then place those in different layers. So, if I'm to follow your example above correctly, I'd likely start out like this:

from textual.app        import App, ComposeResult
from textual.containers import Vertical
from textual.widgets    import Header, Footer, Button

class SidebarExample( App[ None ] ):

    CSS = """
    Screen {
        layers: base sidebar;
    }

    #base {
        align: center middle;
        layer: base;
    }

    #sidebar {
        layer: sidebar;
        border: round red;
        height: auto;
        width: auto;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        yield Vertical(
            Button( "Test Button "),
            Button( "Test Button "),
            Button( "Test Button "),
            Button( "Test Button "),
            Button( "Test Button "),
            id="base"
        )
        yield Vertical(
            Button( "Side Button" ),
            Button( "Side Button" ),
            Button( "Side Button" ),
            id="sidebar"
        )
        yield Footer()

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

giving this as the basic framework:

Is that the sort of thing you had in mind?