Rendering issue with custom widget in a TabPlane

[denehoffman]

I'm still figuring my way around this project, so this might be something obvious that I'm doing wrong, but I'm trying to make a basic file browser in textual:

from textual.app import App, ComposeResult
from textual.widgets import Footer, Label, Markdown, TabbedContent, TabPane, Static, OptionList
from textual.reactive import reactive
from textual.message import Message
from textual.containers import Horizontal
from pathlib import Path
from typing import Callable
from rich.table import Table

LETO = """
# Duke Leto I Atreides

Head of House Atreides.
"""

JESSICA = """
# Lady Jessica

Bene Gesserit and concubine of Leto, and mother of Paul and Alia.
"""

PAUL = """
# Paul Atreides

Son of Leto and Jessica.
"""

class DirectoryContents(OptionList):
    path = reactive(Path.cwd())
    def __init__(self,
                 path: Path | None,
                 filter_paths: Callable[[Path], bool]=lambda _: True,
                 **kwargs):
        super().__init__(**kwargs)
        self.filter_paths = filter_paths
        self.path = path

    def watch_path(self, path: Path | None):
        self.clear_options()
        if path:
            if path.is_dir():
                for sub in path.iterdir():
                    if self.filter_paths(sub):
                        table = Table(show_header=False,
                                      show_edge=False,
                                      show_lines=False,
                                      box=None)
                        table.add_column()
                        table.add_column(justify='right')
                        if sub.is_dir():
                            table.add_row(sub.name, "›")
                        else:
                            table.add_row(sub.name, " ")
                        self.add_option(table)

class FileBrowser(Static):
    path = reactive(Path.cwd())

    def __init__(self,
                 path: Path,
                 filter_paths: Callable[[Path], bool]=lambda _: True,
                 show_hidden: bool=False,
                 **kwargs):
        super().__init__(**kwargs)
        self.filter_paths = filter_paths
        self.path = path.resolve()
        if not show_hidden:
            self.filter_paths = lambda test_path: filter_paths(test_path) and (not test_path.name.startswith('.'))

    async def on_mount(self) -> None:
        await self.mount(Horizontal(
                DirectoryContents(self.path.parent.parent,
                                  filter_paths=self.filter_paths,
                                  id='parent'),
                DirectoryContents(self.path.parent,
                                  filter_paths=self.filter_paths,
                                  id='child'),
                DirectoryContents(self.path,
                                  filter_paths=self.filter_paths,
                                  id='display'),
                ))
        self.query_one('#parent', DirectoryContents).highlighted = list(self.path.parent.parent.iterdir()).index(self.path.parent)
        self.query_one('#child', DirectoryContents).highlighted = list(self.path.parent.iterdir()).index(self.path)

    class PathSelected(Message):
        def __init__(self, path: Path) -> None:
            self.path = path
            super().__init__()

    def on_option_list_option_selected(self, event: OptionList.OptionSelected) -> None:
        event.stop()
        selected_path = str(next(event.option.prompt.columns[0].cells))
        if event.option_list.id == 'parent':
            self.path = self.path.parent
        elif event.option_list.id == 'child':
            self.path = self.path.parent / selected_path
        elif event.option_list.id == 'display':
            self.path = self.path / selected_path
        self.query_one('#parent', DirectoryContents).path = self.path.parent.parent
        self.query_one('#parent', DirectoryContents).highlighted = list(self.path.parent.parent.iterdir()).index(self.path.parent)
        self.query_one('#child', DirectoryContents).path = self.path.parent
        self.query_one('#child', DirectoryContents).highlighted = list(self.path.parent.iterdir()).index(self.path.parent / selected_path)
        self.query_one('#display', DirectoryContents).path = self.path
        self.post_message(self.PathSelected(self.path))

class TabbedApp(App):
    """An example of tabbed content."""

    BINDINGS = [
        ("l", "show_tab('leto')", "Leto"),
        ("j", "show_tab('jessica')", "Jessica"),
        ("p", "show_tab('paul')", "Paul"),
    ]

    def compose(self) -> ComposeResult:
        """Compose app with tabbed content."""
        # Footer to show keys
        yield Footer()

        # Add the TabbedContent widget
        with TabbedContent(initial="jessica"):
            with TabPane("Leto", id="leto"):  # First tab
                yield Markdown(LETO)  # Tab content
                yield FileBrowser(Path.cwd())
            with TabPane("Jessica", id="jessica"):
                yield Markdown(JESSICA)
                with TabbedContent("Paul", "Alia"):
                    yield TabPane("Paul", Label("First child"))
                    yield TabPane("Alia", Label("Second child"))

            with TabPane("Paul", id="paul"):
                yield Markdown(PAUL)

    def action_show_tab(self, tab: str) -> None:
        """Switch to a new tab."""
        self.get_child_by_type(TabbedContent).active = tab


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

I copied the tabbed example from the documentation. by itself. If I don't use tabs, it's "fine":

from textual.app import App, ComposeResult
from textual.widgets import Footer, Markdown, Static, OptionList
from textual.reactive import reactive
from textual.message import Message
from textual.containers import Horizontal
from pathlib import Path
from typing import Callable
from rich.table import Table

LETO = """
# Duke Leto I Atreides

Head of House Atreides.
"""

JESSICA = """
# Lady Jessica

Bene Gesserit and concubine of Leto, and mother of Paul and Alia.
"""

PAUL = """
# Paul Atreides

Son of Leto and Jessica.
"""




class DirectoryContents(OptionList):
    path = reactive(Path.cwd())
    def __init__(self,
                 path: Path | None,
                 filter_paths: Callable[[Path], bool]=lambda _: True,
                 **kwargs):
        super().__init__(**kwargs)
        self.filter_paths = filter_paths
        self.path = path

    def watch_path(self, path: Path | None):
        self.clear_options()
        if path:
            if path.is_dir():
                for sub in path.iterdir():
                    if self.filter_paths(sub):
                        table = Table(show_header=False,
                                      show_edge=False,
                                      show_lines=False,
                                      box=None)
                        table.add_column()
                        table.add_column(justify='right')
                        if sub.is_dir():
                            table.add_row(sub.name, "›")
                        else:
                            table.add_row(sub.name, " ")
                        self.add_option(table)

class FileBrowser(Static):
    path = reactive(Path.cwd())

    def __init__(self,
                 path: Path,
                 filter_paths: Callable[[Path], bool]=lambda _: True,
                 show_hidden: bool=False,
                 **kwargs):
        super().__init__(**kwargs)
        self.filter_paths = filter_paths
        self.path = path.resolve()
        if not show_hidden:
            self.filter_paths = lambda test_path: filter_paths(test_path) and (not test_path.name.startswith('.'))

    async def on_mount(self) -> None:
        await self.mount(Horizontal(
                DirectoryContents(self.path.parent.parent,
                                  filter_paths=self.filter_paths,
                                  id='parent'),
                DirectoryContents(self.path.parent,
                                  filter_paths=self.filter_paths,
                                  id='child'),
                DirectoryContents(self.path,
                                  filter_paths=self.filter_paths,
                                  id='display'),
                ))
        self.query_one('#parent', DirectoryContents).highlighted = list(self.path.parent.parent.iterdir()).index(self.path.parent)
        self.query_one('#child', DirectoryContents).highlighted = list(self.path.parent.iterdir()).index(self.path)

    class PathSelected(Message):
        def __init__(self, path: Path) -> None:
            self.path = path
            super().__init__()

    def on_option_list_option_selected(self, event: OptionList.OptionSelected) -> None:
        event.stop()
        selected_path = str(next(event.option.prompt.columns[0].cells))
        if event.option_list.id == 'parent':
            self.path = self.path.parent
        elif event.option_list.id == 'child':
            self.path = self.path.parent / selected_path
        elif event.option_list.id == 'display':
            self.path = self.path / selected_path
        self.query_one('#parent', DirectoryContents).path = self.path.parent.parent
        self.query_one('#parent', DirectoryContents).highlighted = list(self.path.parent.parent.iterdir()).index(self.path.parent)
        self.query_one('#child', DirectoryContents).path = self.path.parent
        self.query_one('#child', DirectoryContents).highlighted = list(self.path.parent.iterdir()).index(self.path.parent / selected_path)
        self.query_one('#display', DirectoryContents).path = self.path
        self.post_message(self.PathSelected(self.path))


class NotTabbedApp(App):
    """An example of tabbed content."""

    def compose(self) -> ComposeResult:
        """Compose app with tabbed content."""
        # Footer to show keys
        yield Footer()

        # Add the TabbedContent widget
        yield Markdown(LETO)  # Tab content
        yield FileBrowser(Path.cwd())
        yield Markdown(JESSICA)
        yield Markdown(PAUL)


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

There are still some problems with the mechanics of the widget, but my question is more about the formatting. Is it squished vertically because I haven't done any CSS yet, or am I making the app itself incorrectly?

[davep]

It can be tricky to dive into something that isn't a minimal example of a problem, but if I'm understanding your question correctly, I suspect #2411 is an issue you may find helpful.

[denehoffman]

Thank you, I guess I didn't search this question as thoroughly as I thought I did! Unfortunately this didn't seem to solve my issue, but I expect some updates are in the pipeline so I'll keep my eyes open for it.