Static() in Header() ?

[kimusan]

Hi,
I wanted to add a small notification icon on the right side of the Header() of the main window of my app.

Something along these lines:

        with Header() as header:
            header.tall = True
            yield Static("📩", id="dm_notification_icon")

Unfortunately, the icon never shows and I am now wondering where it has gone.

Is there a way to make this work or do I have to do it in a different way ?

[TomJGooding]

Unfortunately, the icon never shows and I am now wondering where it has gone.

Try adding a background to your added Static widget:

from textual.app import App, ComposeResult
from textual.widgets import Header, Static


class ExampleApp(App):
    CSS = """
    #dm_notification_icon {
        background: red;
    }
    """

    def compose(self) -> ComposeResult:
        with Header() as header:
            header.tall = True
            yield Static("📩", id="dm_notification_icon")


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

The problem is that the Header contains docked widgets for the existing icon and the clock, so this approach isn't going to achieve the layout you're looking for. It would probably be better to create a custom widget by subclassing the Header.

[kimusan]

I did try to add background with not luck of finding it. Also tried with dock: right;
I will see if I can create a custom header widget instead. Thanks

[TomJGooding]

Actually, I realised you could use CSS to effectively replace the space for the clock with your icon.

from textual.app import App, ComposeResult
from textual.widgets import Header, Static


class ExampleApp(App):
    CSS = """
    Header {
        & > HeaderClockSpace {
            display: none;
        }

        & > #dm_notification_icon {
            dock: right;
            width: 10;
            padding: 0 1;
            content-align: right middle;
        }
    }
    """

    def compose(self) -> ComposeResult:
        with Header() as header:
            header.tall = True
            yield Static("📩", id="dm_notification_icon")


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

But personally I would create a custom header widget instead.

[kimusan]

I ended up creating a simple custom header. That worked for this. Thanks for the help and ideas.