Setting Input heigth

[betuxy]

Hi,
I really tried to figure this out on my own reading the documentation but couldn't find anything to my problem.
I want to create an app which features (next to header and footer) a input field and a ListView. But the input field takes a height of three which is a lot. Reducing the size leads to neither the placeholder text nor the input beeing displayed in my app.

Is there any way to change this? I wouldn't ask if I weren't completely out of ideas.
If you could point me to a channel to discuss this topic I would be thrilled, i can't ask for help on the discord server.

Kind regards

Code:

from textual.app import App, ComposeResult
from textual.widgets import Header, Footer, Label, ListItem, ListView, Input
from sys import exit


class FWAudit(App):
    """
    This will be the main screen of the app.
    """

    CSS_PATH = "tcss/listview.tcss"
    BINDINGS = [
        ("q", "quit", "Quit")
    ]

    def compose(self) -> ComposeResult:
        """Create child widgets for the app."""
        yield Header()
        yield Input(placeholder="// host", id="search_field", c)
        yield ListView(
            ListItem(Label("One")),
            ListItem(Label("Two")),
            ListItem(Label("Three")),
        )
        yield Footer()

    def on_mount(self) -> None:
        self.screen.styles.background = "black"

    def action_quit(self) -> None:
        exit(0)


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

tcss:

Screen {
    align: center middle;
}

ListView {
    width: 100%;
    height: 100%;
    margin: 1 1;
}

ListItem {
    width: 100%;
    height: 1;
}

Header {
    dock: top;
    content-align: center middle;
}

[github-actions]

Thank you for your issue. Give us a little time to review it.

PS. You might want to check the FAQ if you haven't done so already.

This is an automated reply, generated by FAQtory

[TomJGooding]

The Input has a border which changes colour to indicate when it is focussed.

But if you want to remove it, set border: none; in your CSS.

[betuxy]

@TomJGooding, thank you so much, that basically solved my problem!!

[TomJGooding]

Glad to have helped, free feel to close this issue if this solved you problem.

If you need help with Textual and you don't want to use Discord, the discussions is probably a better place to ask than raising an issue.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.