[Q] Put specific widget some position

[anzhi0708]

Hi :3

If I set a container's align (e.g. Screen) to center middle, then all of its children get put to the center of the terminal.

What if I want to put - let's say #widget_2 - to the right side (align = right) and the rest widgets to "center middle"?

Noob question, sry :-(

[anzhi0708]

I have CSS like this

Screen {
	layers: basic sidebar;
}

#example_1 {
	align: center middle;
	border: round red;
	layer: basic;
}

and

    def compose(self):
        yield Vertical(
            Input(placeholder="Enter some shit here", id="input_1"),
            Button(id="btn_1", label="Hello!"),
            Label("", id="output"),
            id="example_1"
        )

but the #btn_1 was on the left side of the screen instead horizontal center

[davep]

I think I'd approach it the same way as the answer over here: #1557 -- if it's the sidebar you want to the right, this sounds like the perfect use for docking. So, given the answer in the other discussion, the change you'd make is:

diff --git a/center_with_sidebar.py b/center_with_sidebar.py
index 45be8e7..053535a 100644
--- a/center_with_sidebar.py
+++ b/center_with_sidebar.py
@@ -21,6 +21,7 @@ class SidebarExample( App[ None ] ):
         border: round red;
         height: auto;
         width: auto;
+        dock: right;
     }
     """

[anzhi0708]

Oh, sorry for the ill-naming, and thanks for your previous answer! What I'm trying to say is that I placed a Vertical container (which has 3 children: an Input, a Button and a Label) inside a Screen, and set the Vertical's align to center middle, but the Button child and the Label child was not aligned to the center:

I found this a problem when using DataTable as well, and I thought it was a DataTable bug

[anzhi0708]

Here in this case, I was not trying to add a sidebar, just 2 layers :-P Oh, and thanks to your answer, I solved my previous sidebar problem :-D

[davep]

I see. I think I know wha the issue is here. As I recall, at the moment, when Textual is asked to centre-align a collection of items in the container it, in effect, left-aligns the items themselves (amongst themselves) and then centres the resulting collection within the container. You can see this better with this bit of code:

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

class CenterApp( App[ None ] ):

    CSS = """
    Vertical {
        border: round red;
        align: center middle;
    }

    Label {
        border: round yellow;
    }

    Input {
        width: 50%;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        yield Vertical(
            Label( "This is a label" ),
            Button( "This is a button, it's longer" ),
            Input( placeholder="This is an input, it's even longer still" )
        )
        yield Footer()

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

which results in this:

In other words, imagine all of the content of the container is put in the smallest box it can, and then that box is placed in the centre of the container. Remember too that this is happening both horizontally and vertically; it's just not ideal when it happens horizontally.

I seem to recall we had a chat about this internally a wee while back and decided this (the horizontal part anyway) wasn't ideal and it should probably change. I don't remember if an issue was raised or a TODO item placed on our job board -- I'll have to check.

Meanwhile, as a workaround, I think I'd approach it by wrapping each "line" you want in the middle in a Horizontal and controlling things like that:

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

class CenterApp( App[ None ] ):

    CSS = """
    Vertical {
        border: round red;
        align: center middle;
    }

    Horizontal {
        width: 100%;
        height: auto;
        align: center middle;
    }

    Label {
        border: round yellow;
    }

    Input {
        width: 50%;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        yield Vertical(
            Horizontal( Label( "This is a label" ) ),
            Horizontal( Button( "This is a button, it's longer" ) ),
            Horizontal( Input( placeholder="This is an input, it's even longer still" ) )
        )
        yield Footer()

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

resulting in this:

[anzhi0708]

Thanks a lot for your work and thanks for your answer! :3

[anzhi0708]

Thanks a lot for your work and thanks for your reply!

(The problem was solved in the reply above; Since I'm not allowed to mark a single reply as the answer, I'll mark this comment as answer)

[davep]

Most welcome; glad it helped. :-)