Is there any way to make the SelectOverlay popup instead of dropdown?

[zeyutt]

described as the title. is there any way? not found in api doc. wondering if any tcss trick make this possible instead of change the package code.

[github-actions]

We found the following entry in the FAQ which you may find helpful:

• How do I center a widget in a screen?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[TomJGooding]

I suspect this could be tricky to implement. You can sort of achieve this just with CSS, but the problem is that you would need to calculate the offset. This also wouldn't work if the select widget was at the top of the screen.

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


class ExampleApp(App):
    CSS = """
    Screen {
        align: center middle;
    }

    SelectOverlay {
        offset-y: -9;
    }
    """

    def compose(self) -> ComposeResult:
        yield Select.from_values(["foo", "bar", "baz"])


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

[zeyutt]

I suspect this could be tricky to implement. You can sort of achieve this just with CSS, but the problem is that you would need to calculate the offset. This also wouldn't work if the select widget was at the top of the screen.

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

class ExampleApp(App):
CSS = """
Screen {
align: center middle;
}

SelectOverlay {
    offset-y: -9;
}
"""

def compose(self) -> ComposeResult:
    yield Select.from_values(["foo", "bar", "baz"])

if name == "main":
app = ExampleApp()
app.run()

thanks a lot, forgive me for this late reply. Actually "the offset calculation" is also what seems the most straight way to get over with dropdown upwards. BTW, searched in textual issues and also found your mentions somewhere else about this. Sorry for make you reply repeatedly, close this issue with gratitude, sincerely.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.