How do I have a tab with a column inside a page scroll in flet?

Question

I got a problem with page.scroll that I don't know to fix. It used to work with flet 0.5 but it doesn't work with newer versions (right now I'm using 0.6.2). A minimal example is this:

import flet as ft

def main(page: ft.Page):
    # page.scroll = ft.ScrollMode.AUTO <-- If uncomment this, it doesn't work

    text = ft.Text("Hello, world!")

    col_content = ft.Column(controls=[text], auto_scroll=True)

    tabs = ft.Tabs(
        expand=1,
        tabs=[
            ft.Tab(
                text="Example",
                content=ft.Container(
                    content=col_content,
                ),
            ),
        ],
    )

    page.add(tabs)


ft.app(target=main, view=ft.WEB_BROWSER)

The problem is that the content inside the tab (the Hello, world!) is not shown when I enable scroll in the page. How do I fix it?

score 0 · Accepted Answer · answered May 11 '23 at 18:31

A possible solution is not to make all the page scroll, but only the column, like this:

import flet as ft

def main(page: ft.Page):
    text = ft.Text("Hello, world!")

    col_content = ft.Column(controls=[text], auto_scroll=True, scroll=True)

    tabs = ft.Tabs(
        expand=1,
        tabs=[
            ft.Tab(
                text="Example",
                content=ft.Container(
                    content=col_content,
                ),
            ),
        ],
    )

    page.add(tabs)


ft.app(target=main, view=ft.WEB_BROWSER)

Basically, the solution is adding scroll=True to the Column.

How do I have a tab with a column inside a page scroll in flet?

1 Answers1