What's the default width of a Label widget in a Horizontal container?

[vsajip]

Regarding the following script:

from textual.app import App, ComposeResult
from textual.containers import Horizontal
from textual.widgets import Label

class TestApp(App):

    CSS = """
    #left {
        background: blue;
        dock: left;
    }
    #right {
        background: darkred;
        dock: right;
    }
    """

    def compose(self) -> ComposeResult:
        left = Label('Left', id='left')
        right = Label('Right', id='right')
        yield Horizontal(left, right)

app = TestApp()
app.run()

When run, the above displays only the #right label. This is somewhat unexpected, and adding width: 1fr to both #left and #right doesn’t change the result, which I also found surprising. Adding width: 1fr to #left and width: auto to #right shows both labels, with #left taking up all of the space not used by #right.

It seems I’m not understanding something about how Textual CSS and/or Horizontal layouts work - can someone please help me out? I couldn’t see any CSS rules that imply that a Label would occupy 100% of a Horizontal, which seems to be the case. Also, also why doesn’t width: 1fr size the labels equally?

[davep]

I believe the default width of a Label, in a horizontal anyway, is the width of the container. Before I give an example of what I'm seeing, I would also highlight that you're throwing dock into the mix too, which complicates matters. You may want to glance over the docking guide again to make sure this is what you want to be using. My understanding is that when you dock something you pretty much move it into its own isolated style space (for want of a better term) -- size and so on will be style in a way that isn't relative to other widgets. I would imagine this would explain why you're finding that 1fr isn't doing what you'd expect; you have one Label docked left, one docked right, and as I understand it you'll then be applying fractions independent of each other's existence.

If we leave dock out of it for a moment, I think this code should helpfully illustrate the different size options:

from textual.app import App, ComposeResult
from textual.containers import Horizontal
from textual.widgets import Label

class LabelAuto( App[ None ] ):

    CSS = """
    Horizontal {
        border: solid blue;
        height: auto;
    }

    Label {
        border: solid red;
    }

    .width {
        width: auto;
    }

    .height {
        height: auto;
    }

    .one-fr {
        width: 1fr;
    }
    """

    def compose(self) -> ComposeResult:
        yield Horizontal(
            Label( "Raw Label" ),
            Label( "Raw Label" ),
            Label( "Raw Label" ),
            Label( "Raw Label" ),
            Label( "Raw Label" )
        )
        yield Horizontal(
            Label( "width: auto;", classes="width" ),
            Label( "height: auto;", classes="height" ),
            Label( "width: auto; height: auto;", classes="width height" )
        )
        yield Horizontal( Label( "width: auto;", classes="width" ) )
        yield Horizontal( Label( "height: auto;", classes="height" ) )
        yield Horizontal( Label( "width: auto; height: auto;", classes="width height" ) )
        yield Horizontal(
            Label( "width: auto;", classes="width" ),
            Label( "width: auto;", classes="width" ),
            Label( "width: auto;", classes="width" )
        )
        yield Horizontal(
            Label( "width: 1fr;", classes="one-fr" ),
            Label( "width: 1fr;", classes="one-fr" )
        )
        yield Horizontal(
            Label( "width: 1fr;", classes="one-fr" ),
            Label( "width: 1fr;", classes="one-fr" ),
            Label( "width: 1fr;", classes="one-fr" ),
            Label( "width: 1fr;", classes="one-fr" ),
            Label( "width: 1fr;", classes="one-fr" ),
            Label( "width: 1fr;", classes="one-fr" )
        )

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

giving this:

You'll notice that with the first couple of Horizontal containers we're not seeing all of our Labels because we're leaning on the default width, which seems to be the container width (it could be suggested this is a bug, as I look at it -- I would think that it makes sense that Label has a default width that is the size of the content; I'll make a note of that). Beyond that though I think everything is working as you'd expect.

[vsajip]

(it could be suggested this is a bug, as I look at it -- I would think that it makes sense that Label has a default width that is the size of the content; I'll make a note of that)

Yes, I think it is a bug - it certainly violates the principle of least surprise. Note that Flexbox CSS doesn't work like this - it sizes flex items according to their contents by default. I initially used dock: left and dock: right to see if that would make both labels visible, but no go. But this seems to expose a problem with dock in that it seems to affect an item's size, rather than just its position. With this CSS

    #left {
        background: blue;
        width: 1fr;
    }
    #right {
        background: darkred;
        width: 1fr;
    }

You get

Well and good. But then adding dock: left to #left gives this:

What? #left was already at the left, so nothing should have changed - certainly not #left's width. And removing that dock: left and adding dock: right to #right gives

What what what? Surely that has to be a bug, right? And the innocuous seeming

    #left {
        background: blue;
        width: 1fr;
        dock: left;
    }
    #right {
        background: darkred;
        width: 1fr;
        dock: right;
    }

seems to me to indicate the intent "give me two labels, one docked to the left and the other to the right, each taking up equal width" but it gives

And this:

    #left {
        background: blue;
        width: 1fr;
        dock: left;
    }
    #right {
        background: darkred;
        width: 1fr;
        dock: right;
    }
    #mid {
        background: green;
        width: 1fr;
    }

with

    def compose(self) -> ComposeResult:
        left = Label('Left', id='left')
        mid = Label('Mid', id='mid')
        right = Label('Right', id='right')
        yield Horizontal(left, mid, right)

gives the same - just #right showing!

[davep]

I'm afraid I'm struggling to fully follow what you're driving at here, but I think it's worth repeating just in case: I don't think you want dock given what you seem to be wanting to do here. If you're using a Horizontal to lay out 3 things (for example) then placing them inside the Horizontal and controlling their relative widths with fr should do the trick (or I guess grid could be used too). Pulling dock into the mix is going to mean that they don't relate to each other any more.

That is, to the best of my knowledge on this, if you dock something left and make it 1fr and dock something right and make it 1fr they're both going to be 1fr of the width of the container, they're not going to be half the width of the container, because docking them removes them from impacting (or being impacted by) the widgets around them.

To hopefully illustrate, taking one example from above:

    #left {
        background: blue;
        width: 1fr;
        dock: left;
    }
    #right {
        background: darkred;
        width: 1fr;
        dock: right;
    }

seems to me to indicate the intent "give me two labels, one docked to the left and the other to the right, each taking up equal width"

In effect, this is what's happening as I understand it. One is docked left; one is docked right; both have equal width. What they don't have is a width calculated in a shared space/layer/whatever-makes-sense-to-call-it. When you dock #left left it's in effect lifted into its own layer. When you dock #right right it's in effect lifted into its own layer. #left is 1fr and #right is 1fr -- but those two fr calculations are done in isolation.

To have what you want there you'd place them both in a Horizontal and make them both 1fr wide. One will be to the left, one will be to the right, they'll share the horizontal space.

[vsajip]

I don't think you want dock given what you seem to be wanting to do here.

To have what you want there you'd place them both in a Horizontal and make them both 1fr wide. One will be to the left, one will be to the right, they'll share the horizontal space.

You're quite right that I don't need dock for my original use case, as my first image in my earlier message shows - I get what what you said in the second bit quoted above. I used dock initially after finding the Labels unexpectedly overlapped, before arriving at the other solution. However ...

because docking them removes them from impacting (or being impacted by) the widgets around them.

When you dock #left left it's in effect lifted into its own layer.

Perhaps dock has a specialised meaning in Textual, in which case fair enough, but here's how I understand docking to work in the more general sense. If you have a container window with some child windows, one of which is docked, then I'd expect (in general, not specifically with reference to Textual - hence I'm using the term "window" rather than "widget")

• The docked window sticks to the side of the container in which it's docked.
• Any windows which are siblings of the docked window are restricted to the area in the container which is not occupied by the docked window.
• If the docked window is docked against left or right, its height will be the height of the container, but its width will be not in general be related to the width of the container.
• If the docked window is docked against top or bottom, its width will be the width of the container, but its height will be not in general be related to the height of the container.

This behaviour is what I observe, for example, when I dock the F12 "Developer tools" pane of either Chrome or Firefox to the main browser window. However, from what you're saying, Textual doesn't follow this scheme for docking. Is that by design, then?

[davep]

Swapping in widget for window, etc...

The docked window sticks to the side of the container in which it's docked.

As per the first paragraph in the documentation for docking: "Docking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container."

Any windows which are siblings of the docked window are restricted to the area in the container which is not occupied by the docked window.

This is where things start to differ. Again, from the docs: "Docking a widget removes it from the layout and fixes its position, aligned to either the top, right, bottom, or left edges of a container." -- note the part about "removes it from the layout". As such it won't really have siblings any more because it is docked.

If the docked window is docked against left or right, its height will be the height of the container, but its width will be not in general be related to the width of the container.

That's how a docked widget is documented to work.

If the docked window is docked against top or bottom, its width will be the width of the container, but its height will be not in general be related to the height of the container.

That's also how a docked widget is documented to work.

Textual doesn't follow this scheme for docking. Is that by design, then?

From what I'm seeing it's more or less the same overall approach, so I think I might be missing the difference here.

By way of illustration, consider the following code and how you can show/hide the docks and how they're sized relative to their container and keep the undocked widget in view.

from inspect import cleandoc
from textual.app import App, ComposeResult
from textual.widgets import Static

class Dock( Static ):
    pass

class Docking( App[ None ] ):

    BINDINGS = [
        ( "up", "toggle('top')", "" ),
        ( "right", "toggle('right')", "" ),
        ( "down", "toggle('bottom')", "" ),
        ( "left", "toggle('left')", "" ),
    ]

    CSS = """
    Dock {
        display: none;
    }

    .visible {
        display: block;
    }

    #top {
        background: red;
        height: 30%;
        width: 100%;
        dock: top;
    }

    #left {
        background: green;
        width: 30%;
        height: 100%;
        dock: left;
    }

    #bottom {
        color: black;
        background: yellow;
        height: 30%;
        width: 100%;
        dock: bottom;
    }

    #right {
        color: black;
        background: orange;
        width: 30%;
        height: 100%;
        dock: right;
    }

    #inner {
        border: solid grey;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Dock( "I am the top dock", id="top" )
        yield Dock( "I am the left dock", id="left" )
        yield Dock( "I am the bottom dock", id="bottom" )
        yield Dock( "I am the right dock", id="right" )
        yield Static( cleandoc( """
        At 0946 GMT on the morning of September 11 in the exceptionally
        beautiful summer of the year 2077, most of the inhabitants of Europe
        saw a dazzling fireball appear in the eastern sky. Within seconds it
        was brighter than the Sun, and as it moved across the heavens -- at
        first in utter silence -- it left behind it a churning column of dust
        and smoke.
        """ ) * 200, id="inner" )

    def action_toggle( self, dock: str ) -> None:
        self.query_one( f"#{dock}", Dock ).toggle_class( "visible" )

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

[vsajip]

so I think I might be missing the difference here.

In my description, docking left shouldn't affect the width of the widget (only its height), but it seemed to, from the images I posted. But perhaps that's not due to the docking per se, but the default width of full-container-width for a widget rather than based on content (width: auto). This might be sorted out if #1316 is fixed.

Thanks for your patience, I'm new to Textual and still feeling my way around.

[davep]

#1318 is now in main, which improves the default width of a Label. But just to stress again: docking only affected the width of the widget in a way it was supposed to -- the docked widget was lifted out of the layout into its own "layout space", as it were. Given that (at that time) a Label would be a wide as possible, it did what it was told. :-)

Thanks for your patience, I'm new to Textual and still feeling my way around.

No trouble at all. For all of us (me included), there's going to be differences from our own frameworks and environments that we're using as a frame of reference. @willmcgugan knows this this all too well, getting exactly those sorts of questions from me while sat next to him.

So much so he's currently 1/2 way round the world from here. I'm sure this isn't a coincidence. :-P