Text inside ListItem is not aligned.

[WantToLearnJapanese]

from rich.console import RenderableType
from rich.text import Text
from textual.app import App
from textual.widgets import ListView, ListItem


class NewItem(ListItem):
    def __init__(self, txt):
        super().__init__()
        self.txt = txt

    def render(self) -> RenderableType:
        return Text(self.txt, justify="center")


class TQDMS_App(App):
    def compose(self):
        self.pbar_listview = ListView(
            name="pbar_logs",
        )
        self.pbar_listview.style = "align:center"
        for i in range(1, 10 + 1):
            item = NewItem(f"item {i}")
            # set style center align for each item

            item.style = "align:center"
            self.pbar_listview.append(item)

        yield self.pbar_listview


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

[github-actions[bot]]

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

[davep]

At first glance there looks to be quite a few different things going on in that code, and it doesn't look like I'd be able to test it out when I get to my desk as it doesn't look like it will run in isolation.

Do you think you could isolate the issue in a small standalone example, ideally illustrating what you expected to see and why, and how the result differs?

[WantToLearnJapanese]

At first glance there looks to be quite a few different things going on in that code, and it doesn't look like I'd be able to test it out when I get to my desk as it doesn't look like it will run in isolation.

Do you think you could isolate the issue in a small standalone example, ideally illustrating what you expected to see and why, and how the result differs?

@davep
I edited the question as you said.
I found that justify="center" align the texts inside ListItem instance.

But how could I align text inside ListItem by CSS?

[davep]

Thanks for simplifying that. Made it much easier to review.

[davep]

I suspect there's a bit of confusion here about what a ListItem is. A ListItem is intended to be a container for other widgets. So, if you look at the example code for a ListView you'll see that each ListItem contains a Label:

from textual.app import App, ComposeResult
from textual.widgets import ListView, ListItem, Label, Footer


class ListViewExample(App):

    CSS_PATH = "list_view.css"

    def compose(self) -> ComposeResult:
        yield ListView(
            ListItem(Label("One")),
            ListItem(Label("Two")),
            ListItem(Label("Three")),
        )
        yield Footer()


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

Running the above code (with the CSS in place too) gives this:

So, if we wanted to (for example) right-align that text, we'd want to ensure that each Label is 100% the width of the ListItem it's within, and then text-align the text to the right. Here's the above example, modified in that way, with the CSS added so you have a easy-to-run sample:

from textual.app import App, ComposeResult
from textual.widgets import ListView, ListItem, Label, Footer


class ListViewExample(App):

    CSS = """
    Screen {
        align: center middle;
    }

    ListView {
        width: 30;
        height: auto;
        margin: 2 2;
    }

    Label {
        width: 100%;
        text-align: right;
        padding: 1 2;
    }
    """

    def compose(self) -> ComposeResult:
        yield ListView(
            ListItem(Label("One")),
            ListItem(Label("Two")),
            ListItem(Label("Three")),
        )
        yield Footer()


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

then you get this:

The really handy part about this is you can combine different sorts of widgets within the ListItem to make them really rich. For example, if we flesh the above out a bit more:

from textual.app import App, ComposeResult
from textual.widgets import ListView, ListItem, Label, Footer


class ListViewExample(App):

    CSS = """
    Screen {
        align: center middle;
    }

    ListView {
        width: 30;
        height: auto;
        margin: 2 2;
    }

    ListItem {
        layout: horizontal;
    }

    Label {
        width: 1fr;
        padding: 1 2;
    }

    Label.left {
        text-align: left;
    }

    Label.middle {
        text-align: center;
    }

    Label.right {
        text-align: right;
    }
    """

    def compose(self) -> ComposeResult:
        yield ListView(
            ListItem(Label("One", classes="left"), Label("One", classes="middle"), Label( "One", classes="right")),
            ListItem(Label("Two", classes="left"), Label("Two", classes="middle"), Label( "Two", classes="right")),
            ListItem(Label("Three", classes="left"), Label("Three", classes="middle"), Label( "Three", classes="right")),
        )
        yield Footer()


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

You get this: