How to Make SelectCurrent Fill the Entire Width of a Select Element When Using border_title?

[Walterhart]

Hello,
I am messing around with border_title for input and select. I notice that when I tried to add border_title on Select, the sub-widget (I think its SelectCurrent) does not reach the Select width. This leaves space on both ends of SelectCurrent.

My questions are:

1. Is there a way to stretch SelectCurrent to fill the space or did I implement my CSS incorrectly?
2. Should SelectCurrent handle the border_title if possible?

I appreciate the help!

from textual.app import App, ComposeResult
from textual.widgets import Input, Select
from textual.containers import Container

RANKS = ["Bronze", "Silver", "Gold", "Platinum", "Diamond"]

class UserRankApp(App[None]):
    CSS = """
   Container{
        align: center middle;
   }

   Input{
        border: wide white;
        padding: 1 0;
        width: 100%;
        height: auto;
        color: white;
        width: 60;
    }

    Select > *{
       padding: 1 1;
       width: 100%;
       border: none;
    }
    Select{
        border: wide white;
        width: 60;
    }
    """

    def compose(self) -> ComposeResult:
        with Container():
            username_input = Input(placeholder="Enter your username", classes="username-border")
            username_input.border_title = "Username"
            yield username_input

            userrank_selection = Select([(rank, rank) for rank in RANKS], prompt="Select Rank", classes="selection")
            userrank_selection.border_title = "Rank"
            yield userrank_selection

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

[ddkasa]

Hi @Walterhart ,

Since the background of SelectCurrent is different to the main Select widget you will have to set it to $surface.

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


class SelectApp(App[None]):
    CSS = """
    Select {
        background: $surface;
        border: wide white;

        & > * {
            border: none;
            padding: 1 0;
        }
    }
    """

    def compose(self) -> ComposeResult:
        yield (select := Select([("Foo", "bar")]))
        select.border_title = "Rank"


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

Or you could target SelectCurrent directly and adjust it.

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


class SelectApp(App[None]):
    CSS = """
    Select > SelectCurrent {
        border: tall white;
    }
    """

    def on_mount(self) -> None:
        self.query_one("SelectCurrent").border_title = "Rank"

    def compose(self) -> ComposeResult:
        yield Select([("Foo", "bar")])


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

Make sure to adjust for pseudo-classes though.

[Walterhart]

It works! Thank you!

Edit: The second method works correctly. But the first method still have a little space.