How do I right-align the text entered into an Input?

[porridge]

For an accounting-related application it's useful to have the decimal places align. I tried the following, but whatever I do, text is on left:

#!/usr/bin/python3

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


class ReconcileApp(App):
    CSS = """
    Input {
     align: right middle;
     text-align: right;
     content-align: right middle;
    }
    """

    def compose(self):
        yield Input()
        yield Input()


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

[davep]

As you've found, those styles don't affect the way Input displays its content; as of right now I don't believe there is a way to do what you're looking for. I think, if I were to do what you're doing, I'd wrap Input and make it size: auto, align it right in the container widget, and work from there. For example:

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

class RightInput(Widget):

    DEFAULT_CSS = """
    RightInput {
        width: 1fr;
        height: auto;
        align-horizontal: right;
    }

    RightInput Input {
        width: auto;
    }
    """

    def compose(self) -> ComposeResult:
        yield Input()


class RightAlignInput(App[None]):

    def compose(self) -> ComposeResult:
        yield RightInput()
        yield RightInput()
        yield RightInput()
        yield RightInput()

if __name__ == "__main__":
    RightAlignInput().run()

I guess, ideally, this would be fleshed out so that RightInput presents the same API (access to the value, that sort of thing), although even this approach would allow fairly straightforward selector access to the Input within given it's still an Input. And, of course, if you wanted them to look exactly like an Input, all the same width, etc, some more styling work would need to be done.

As the core of an approach though I think it would be workable.

[porridge]

Thanks, this seems to do the trick.
Applying background: $background; to both RightInput and Input also makes the trick invisible.

[porridge]

However there is a downside: clicking the empty part of RightInput has no effect on focus (i.e. does not move the cursor to the child Input). I guess it's possible to forward focus events but it's another hurdle that could be prevented by adding first-class right-align support 😅