Input takes up whole width

[dAnjou]

Hi,

with this code I'd expect all the widgets to show:

from textual.app import App, ComposeResult
from textual.containers import Horizontal, HorizontalGroup
from textual.widgets import Button, Input, Select, Label

class Sample(App):
    def compose(self) -> ComposeResult:
        with Horizontal():  # same with HorizontalGroup
            yield Select.from_values(["foo", "bar"]).focus()
            yield Input(placeholder="placeholder")
            yield Button("Button")
        with Horizontal():  # same with HorizontalGroup
            yield Select.from_values(["foo", "bar"]).focus()
            yield Button("Button")

if __name__ == "__main__":
    sample = Sample()
    sample.run()

Instead, it looks like this:

I guess Select can be squished because by default it's hard to determine what its width should be (maybe it could be calculated to show at least the prompt?). But I wouldn't have expected the Button to disappear, especially since Select behaves similar in that it expands by default as well but it leaves space for the Button 🤔

Is this expected behavior? If so, what CSS could I apply, so that the Button gets its space? And is there any way to auto-resize the Select according to its content?

Thank you! 🙏

[apoorva-01]

Yeah, this is expected, and it comes down to width. Input's default CSS is width: 100%, so inside a Horizontal it grabs the entire row and leaves nothing for the Button. Select is different: its default is width: 1fr, which is why it shares space and the Button survives in your second row (where there's no Input competing for the whole width).

Give Input the same 1fr treatment and everything flexes together:

class Sample(App):
    CSS = """
    Input { width: 1fr; }
    """

Now Select, Input, and Button all share the row, and the Button keeps its 16-cell min-width.

On auto-sizing Select to its content: there's no content-based width for it out of the box, so set an explicit width or leave it at 1fr and let it share. If you'd rather the whole row size to content instead of stretching, put width: auto on the Horizontal and give each child an auto/fixed width.