2

I am building a FLET app, but sometimes I have a datatable which is too large for the frame it is in. For the row I have a scrollbar appearing, but for the column I just don't seem to get it working.

In this code a scrollbar simply does not appear.

import pandas as pd
pd.options.display.max_columns = 100
from services.bag import PCHN
from utils.convertors import dataframe_to_datatable
import flet as ft

def main(page: ft.page):
    def bag_service(e):
        pc = '9351BP' if postal_code_field.value == '' else postal_code_field.value
        hn = '1' if house_number_field.value == '' else house_number_field.value
        address = PCHN(pc, 
                       hn).result
        bag_container[0] = dataframe_to_datatable(address)
        page.update() # This is not updating my bag_table in place though. It stays static as it is.

    # define form fields
    postal_code_field = ft.TextField(label='Postal code')
    house_number_field = ft.TextField(label='House number')
    submit_button = ft.ElevatedButton(text='Submit', on_click=bag_service)

    # fields for the right column
    address = PCHN('9351BP', '1').result
    bag_table = dataframe_to_datatable(address)
    bag_container = [bag_table]
    
    # design layout
    # 1 column to the left as a frame and one to the right with two rows
    horizontal_divider = ft.Row
    left_column = ft.Column
    right_column = ft.Column
    
    # fill the design
    page.add(
        horizontal_divider(
        [left_column(
            [postal_code_field,
                 house_number_field,
                 submit_button
                 ]
            ),
         right_column(
             [
                 ft.Container(
                        ft.Row(
                            bag_container, 
                            scroll='always'
                            ),
                        bgcolor=ft.colors.BLACK,
                        width=800,)
                ],scroll='always'
             )
        ]
        )
    )

if __name__ == '__main__':
    ft.app(target=main,
           view=ft.WEB_BROWSER,
           port=666
           )

I am lost as to what could be the case here. Any help would be much appreciated.

mtjiran
  • 292
  • 1
  • 2
  • 12

1 Answers1

0

If you want to scroll a Column, you must set a fixed height on the Column or set expand=True on the Column and all parents. Otherwise the column will grow to fit all its children.

Example:

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.Column(
            scroll=ft.ScrollMode.ALWAYS,
            expand=True, # first alternative
            # height=page.height, # second alternative (without expand=True)
            controls=[
                ft.ListTile(
                    title=ft.Text(value=str(i)),
                )
                for i in range(20)
            ],
        ),
    )


ft.app(target=main)

Why does expand help?

Flet's expand is the equivalent to wrapping a widget by an Expanded or Flexible widget in Flutter, setting the size of a control/widget to it's maximum (or a specified value) within its parent. Without expand, the view, which acts like just another Column, grows as large as the child Column wants to be. Setting expand restricts and expands the child Column to the parent's size. Only then does a scrollbar make sense.

EzPizza
  • 979
  • 1
  • 13
  • 22