Button and Input's height couldn't be set to 1 cell

[zhongqingg]

I set the Button and Input to '1 line' height in css, but the text on the button can't show out, and the height of button seems to be 2 line, while the Input keeps 3 line height.

my python code is here:

from textual.app import App, ComposeResult
from textual.widgets import TextLog
from textual.widgets import Button, Footer, Header, Static, Input, Label

class ControlZone(Static):
    def compose(self) -> ComposeResult:
        yield Button(label="prev", id="prev", variant="success")
        yield Input("0", id="curNo")

class TextLogApp(App):
    CSS_PATH = "test.css"
    BINDINGS = [("d", "toggle_dark", "Toggle dark mode")]

    def compose(self) -> ComposeResult:
        yield Header()
        yield Footer()
        yield ControlZone()
        yield TextLog(highlight=True, markup=True, wrap=False)

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

and the css code is here:

ControlZone {
    layout: horizontal;
    margin: 0;
    padding: 0;
}
Button {
    content-align: center middle;
    width: 5;
    height: 1;
    margin: 0;
    padding: 0;
}
Input {
    content-align: center middle;
    width: 5;
    height: 1;
    margin: 0;
    padding: 0;
}

the app screenshot is here:

when i change the height to 3, the app shows normal like this:

i read the documents and refer to the #1377 , but i failed to solve my problem after trying set the min-height: 1

[davep]

Note this part in the documentation for Button:

The spacing between the text and the edges of a button are due to border, not padding. To create a button with zero visible padding, use the border: none; declaration.

If I add border: none; to the Button styles in your code it appears to work as you wish.

[zhongqingg]

@davep thanks for your reply, it works!

[davetapley]

How about the Input?
The docs say:

The spacing around the text content is due to border. To remove it, set border: none; in your CSS.

but doesn't work for me 🤔

[TomJGooding]

@davetapley Removing the border seems to work from my quick test below. Could you post an example where it isn't working for you?

from textual.app import App, ComposeResult
from textual.widgets import Input


class ExampleApp(App):
    CSS = """
    #no-border {
        border: none;
    }
    """

    def compose(self) -> ComposeResult:
        yield Input(placeholder="Regular Input...")
        yield Input(placeholder="Input without border...", id="no-border")


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

[davetapley]

@TomJGooding yep, that works, must be something weird in my app. Apologies for time wasting 😑