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?