Widgets overlap

[AndyDralle]

Hi, I'm having some trouble building my tui, because my widgets keep overlapping.

Consider this code:

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

class ExampleApp(App):
    """My cool tui."""

    def __init__(self):
        super().__init__()
        self.title = "Recording database"

    def compose(self) -> ComposeResult:
        yield Header()
        with Horizontal():
            yield Input(placeholder = "Path")
            yield Button("Store thing", id = "save_button", variant = "success")
        yield Footer()

if __name__ == "__main__":
    app = ExampleApp()
    app.run()

With the Input widget before the Button, the Input takes up all the horizontal space, and the Button is not visible:

If I switch the order of the widgets, the Button becomes visible, but the Input widget gets cut off:

Is this simply default behaviour that I need to override with a TCSS file, or am I doing something wrong? Ideally, I would like my program to be very simple and live in a single .py file.

[TomJGooding]

The problem is that the Input widget default CSS has width: 100%, whereas in this layout instead we want the available width.

You can add something like this to your app class if you don't want a separate CSS file:

    CSS = """
    Input { width: 1fr; }
    """

https://textual.textualize.io/guide/styles/#fr-units

[AndyDralle]

Perfect! That's exactly what I was looking for. Thanks for the swift reply!