textualpython-textualtextual-framework

How to wrap TabbedContent Tabs list display in python textual?


I'm working with Textual, a great TUI framework in python.

I need to display many tabs, which each contain wide data tables. I'd like the tab list to display fully within the screen width (wrapping if needed).

However, I would like the DataTables to still be displayed at full width with a horizontal scroll (just mentioning this as a constraint - I don't want to end up truncating the entire app width).

I have not figured out how to apply styles to accomplish this, or if it is even possible. I've tried targeting all the subcomponents for the TabbedContent that seem like they may contain the display for the tab list, but these appear to have no effect.

Example:

class TooManyTabsApp(App):
    CSS_TARGETS = [
        "ContentTabs",
        "#tabs-list",
        "#tabs-list-bar",
        "#tabs-scroll",
        "Tabs",
        "TabPane",
        "ContentSwitcher",
        "TabbedContent"
    ]

    CSS = f"""
        {CSS_TARGETS[0]} {{
            max-width: 100vw;
        }}
    """

    def compose(self):
        columns = [f"Loooooong column {i}" for i in range(10)]

        with TabbedContent():
            for i in range(10):
                with TabPane(f"Loooooong Tab {i}"):
                    dt = DataTable()
                    dt.add_columns(*columns)
                    yield dt

    def on_mount(self):
        self.log(self.css_tree)

def main():
    app = TooManyTabsApp()
    app.run()

if __name__ == "__main__":
   main()

Regardless of the target, the display I get continues to extend off the screen: A wide TabbedContent display, with tabs extending off the screen. The active tab contains a wide data table, with columns extending off the screen and a horizontal scroll bar.

My desired view would look something like:

Looooooong Tab 0 | Looooooong Tab 1 | Looooooong Tab 2 | Looooooong Tab 3 |
Looooooong Tab 4 | Looooooong Tab 5 | Looooooong Tab 6 | Looooooong Tab 7 |
Looooooong Tab 8 | Looooooong Tab 9 |

<selected pane content>

Am I missing something here? I would appreciate any pointers.


Solution

  • The tabs aren't designed to wrap. They already take 100% of the width, and will scroll to show the currently selected tab.

    I'm curious what behavior you wanted if there are too many tabs to fit. Presumably the tabs would word wrap? So the first tab would be "Looooong\nTab\n0" on three lines?