TabbedContent's height fit to content?

[fsonnenburg]

Hi all,
since I discovered textual, I really love it, thanks for all this work!

I'm trying some things with the combination of a DataTable inside a TabbedContent, like this:

I would like to have the TabbedContent's height adapted to the child's height, in my case a DataTable. But it should also have a maximum height!

I didn't find a solution for this up to now. The only thing that should work is the, from my point of view, poor-mans-solution: with each new inserted row (making the child's height bigger), increase the TabbedContent's height, up to the maximum. Then, with more rows and having CSS "DataTable { height: 100%; }", the table should get a scrollbar.

Is this possible with CSS?

Thanks a lot - Frank

[willmcgugan]

You might want to knock up a sample app and tcss with all the elements you need, and I'll suggest some CSS to fix it.

[fsonnenburg]

This would be great!

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import VerticalScroll
from textual.widgets import Header, Footer, TabbedContent, DataTable, Pretty


class Dashboard(App):
    """Dashboard"""

    BINDINGS = [
        ("d", "toggle_dark", "Toggle dark mode"),
        Binding("ctrl+q", "app.quit", "Quit", show=True),
    ]
    TITLE = "Dashboard"
    CSS = """
    TabbedContent {
        height: 1fr;
    }

    DataTable {
        height: 100%;
    }

    VerticalScroll {
        height: 2fr;
    }
    """

    def compose(self) -> ComposeResult:
        """Create child widgets for the app."""
        yield Header()
        with TabbedContent("Workflows"):
            yield DataTable()
        with VerticalScroll():
            yield Pretty({"o": ["m", "g"]})
        yield Footer()

    def on_mount(self) -> None:
        table = self.query_one(DataTable)
        table.add_columns("Id", "Description", "Status", "Result Id")
        for row in [(1, 2, 3, 4), ("a", "b", "c", "d"), ("fee", "fy", "fo", "fum")]:
            table.add_row(key=row[0], *row)

    def action_toggle_dark(self) -> None:
        """An action to toggle dark mode."""
        self.dark = not self.dark


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

[willmcgugan]

There was an issue with DataTables in tabbed content, which is fixed in 0.63.5

From your sketch, I think you want to set the tabbed content, and DataTable to height: auto

[fsonnenburg]

Great, this works perfect with an explicit line count:

    CSS = """
    TabbedContent {
        max-height: 8;
    }
    """

But with relative values the result is not really what I expect, when live shrinking and expanding the terminal while viewing. But I think, this is really hard to figure out, and I'm even not sure whether my expectation is the "correct" behavior.

    CSS = """
    TabbedContent {
        max-height: 1fr;
    }

    Pretty {
        height: 3fr;
    }
    """

Thanks a lot for your answer and for the fix in 0.63.5.

Best regards, Frank

[willmcgugan]

With that CSS, the TabbedContent will take up 1/4 of the height, and the Pretty will take up 3/4 of the height.

[fsonnenburg]

Ok, I understand. This works perfect with TabbedContent { height: ...

But with max-height and fractional values, it always will show the whole table. If the terminal height is too small, a terminal vertical scrollbar will be shown. I tried with 1fr / 3fr and even with 1fr / 30fr as in this whole example. I added more rows to the table and more lines in the second section, the VerticalScroll, than I had before in the first example:

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import VerticalScroll
from textual.widgets import Header, Footer, TabbedContent, DataTable, TextArea


class Dashboard(App):
    """Dashboard"""

    BINDINGS = [
        ("d", "toggle_dark", "Toggle dark mode"),
        Binding("ctrl+q", "app.quit", "Quit", show=True),
    ]
    TITLE = "Dashboard"
    CSS = """
    TabbedContent {
        max-height: 1fr;
    }

    VerticalScroll {
        height: 30fr;
    }
    """

    def compose(self) -> ComposeResult:
        """Create child widgets for the app."""
        yield Header()
        with TabbedContent("Workflows"):
            yield DataTable()
        with VerticalScroll():
            yield TextArea("abc some text\n" * 100)
        yield Footer()

    def on_mount(self) -> None:
        table = self.query_one(DataTable)
        table.add_columns("Id", "Description", "Status", "Result Id")
        for row in [
            (1, 2, 3, 4),
            ("a", "b", "c", "d"),
            ("fee", "fy", "fo", "fum"),
        ] * 10:
            table.add_row(*row)

    def action_toggle_dark(self) -> None:
        """An action to toggle dark mode."""
        self.dark = not self.dark


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

This is more or less only fyi. I don't see this really as an issue, because it might be an unsolvable problem. or at least very difficult because of the interdependencies also with the auto height of the DataTable (the default).

With knowing this, one comes along quite good with either using height and fractional values, or max-height with absolute values.

[willmcgugan]

I'm fuzzy on what you are trying to do, but I doubt you need the height 30fr.

If you want the table to grow until it reaches a maximum height, you can set the TabbedContent to height: auto, and max-height: 50%. That will cause the table to grow until it reaches half the height. Set the VerticalScroll to 1fr to consume the remaining space.

[fsonnenburg]

Yes of course, I only selected 30fr for demo purposes to show that even then the TabbedContent takes the whole screen.

But with your proposal: this is exactly what I want, I didn't try a percentage value, this works with max-height as desired!

Thanks a lot for this solution. Again, I find textual really really great, so cool!