DataTable inside a TabbedContent/TabPane behaves abnormally.

[arcivanov]

The reproducible example is below. if True: can be switched to if False: to see the difference.

DataTable inside TabbedContent inside the Grid (if True):

DataTable inside the Grid (no TabbedContent) (If False):

Observe properly sized DataTable "#orders" border in the latter case vs the same for the former.

import asyncio

from textual.app import App, ComposeResult
from textual.containers import Grid
from textual.widgets import Footer, Header, RichLog, DataTable, TabbedContent, \
    TabPane, Label

class MyApp(App):
    DEFAULT_CSS = """
    #content-grid {
        grid-size: 2 4;
        grid-gutter: 0 0;
        width: 100%;
    }
    #tabbed-content {
        column-span: 2;
        row-span: 3;
        padding: 0 0;
        height: 100%;
    }
    #tab-orders {
    }
    #orders {
        column-span: 2;
        row-span: 3;
        border: solid $primary 80%;
        height: 100%;
    }
    #logs {
        row-span: 1;
        height: 100%;
        border: solid $primary 80%;
    }
    #workflows {
        row-span: 1;
        height: 100%;
        border: solid $primary 80%;
    }
    """

    def compose(self) -> ComposeResult:
        yield Header(show_clock=True)

        with Grid(id="content-grid"):
            if True:
                with TabbedContent(id="tabbed-content"):
                    with TabPane("Orders", id="tab-orders"):
                        yield DataTable(id="orders",
                                        zebra_stripes=True,
                                        cursor_type="row",
                                        show_row_labels=False,
                                        show_header=False)
                    with TabPane("Positions", id="tab-positions"):
                        yield Label("Positions", id="positions")
                    with TabPane("Account", id="tab-account"):
                        yield Label("Account", id="accounts")
            else:
                yield DataTable(id="orders",
                                zebra_stripes=True,
                                cursor_type="row",
                                show_row_labels=False,
                                show_header=False)

            yield RichLog(id="logs")
            yield DataTable(id="workflows", show_header=False)

        yield Footer()

def main():
    async def _main():
        await MyApp().run_async()

    asyncio.run(_main())

if __name__ == "__main__":
    main()

[github-actions[bot]]

Thank you for your issue. Give us a little time to review it.

PS. You might want to check the FAQ if you haven't done so already.

This is an automated reply, generated by FAQtory

[arcivanov]

Textual Diagnostics

Versions

Name	Value
Textual	0.63.4
Rich	13.7.1

Python

Name	Value
Version	3.12.3
Implementation	CPython
Compiler	GCC 13.2.1 20240316 (Red Hat 13.2.1-7)
Executable	/home/arcivanov/.pyenv/versions/3.12.3/envs/boris-trading/bin/python

Operating System

Name	Value
System	Linux
Release	6.8.10-300.fc40.x86_64
Version	#1 SMP PREEMPT_DYNAMIC Fri May 17 21:20:54 UTC 2024

Terminal

Name	Value
Terminal Application	Unknown
TERM	xterm-256color
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=252, height=71
legacy_windows	False
min_width	1
max_width	252
is_terminal	True
encoding	utf-8
max_height	71
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

[TomJGooding]

I think the problem is that TabPane has a default height of auto. If you change the height of your DataTable to 1fr rather than than 100%, does this work as expected?

[arcivanov]

Yes, it does, thank you!

    #tab-orders {
        padding: 0 0;
    }
    #orders {
        column-span: 2;
        row-span: 3;
        border: solid $primary 80%;
        height: 1fr;
    }

[github-actions[bot]]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.