[Question] How to get always visible Row horizontal scrollbar?

[ositoMalvado]

Question

Hello partners! I love flet, I'm learning more and more, at this moment I want to make a Row that I have (with DataList inside) show its horizontal scrollbar constantly, since currently to scroll to the sides I must go to the end of my Row (which that I don't want)

flet_.2024-abril-17.Ifibka.mp4

Code sample

columnas = [
        ft.Column(
            [
                ft.Row(
                    [
                        ft.DataTable(
                            divider_thickness=5,
                            column_spacing=20,
                            columns=[
                                ft.DataColumn(ft.Text("Propuesta")),
                                ft.DataColumn(ft.Text("Ramo")),
                                ft.DataColumn(ft.Text("Socio")),
                                ft.DataColumn(ft.Text("Patente")),
                                ft.DataColumn(ft.Text("Premio")),
                                ft.DataColumn(ft.Text("Cuotas")),
                                ft.DataColumn(ft.Text("Interes")),
                                ft.DataColumn(ft.Text("Suma asegurada")),
                                ft.DataColumn(ft.Text("Suma asegurada anterior")),
                                ft.DataColumn(ft.Text("Cobertura")),
                                ft.DataColumn(ft.Text("Periodo de facturación")),
                            ],
                            rows=getDatos(propuesta["propuestas"]),
                        )
                    ],
                    scroll=ft.ScrollMode.ALWAYS  # Asegura que el scrollbar horizontal del Row esté siempre visible
                )
            ],
            expand=1,
            adaptive=True,
            scroll=ft.ScrollMode.ALWAYS  # Asegura que el scrollbar vertical de la Column esté siempre visible
        )
        for propuesta in datos
    ]

Error message

Not error, but want to see Row ScrollBar always, or sticked.

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

Set scroll mode to always: https://flet.dev/docs/controls/row#scroll

[ositoMalvado]

I made horizontal scrollbar works, but now vertical scrollbar is hidding...

flet_.2024-abril-18.o8ua3X.mp4

    columnas = [
        ft.Column([
                ft.Row([
                    ft.Stack(
                        # expand = 1,
                        height = 300,
                        controls=[
                            ft.Column(
                                [
                                    ft.DataTable(
                            # border=ft.border.all(1, ft.colors.BLACK),
                                        divider_thickness=5,
                                        column_spacing=20,
                                        # expand=False,
                                        columns=[
                                            ft.DataColumn(ft.Text("Propuesta")),
                                            ft.DataColumn(ft.Text("Ramo")),
                                            ft.DataColumn(ft.Text("Socio")),
                                            ft.DataColumn(ft.Text("Patente")),
                                            ft.DataColumn(ft.Text("Premio")),
                                            ft.DataColumn(ft.Text("Cuotas")),
                                            ft.DataColumn(ft.Text("Interes")),
                                            ft.DataColumn(ft.Text("Suma asegurada")),
                                            ft.DataColumn(ft.Text("Suma asegurada anterior")),
                                            ft.DataColumn(ft.Text("Cobertura")),
                                            ft.DataColumn(ft.Text("Periodo de facturación")),
                                        ],
                                        rows=getDatos(propuesta["propuestas"]),
                                    )
                                ],
                                scroll=ft.ScrollMode.ALWAYS
                            ),
                        ]
                    )
                        
                ],
                expand=False,
                scroll=ft.ScrollMode.ALWAYS
                )
            
            ],
            expand=1,
            adaptive=True,
            scroll=ft.ScrollMode.ALWAYS
        )
        for propuesta in datos
    ]

[ndonkoHenri]

Try customizing the scrollbar's theme: https://flet.dev/blog/scrolling-controls-and-theming#scrollbar-theme

[Sstrv]

the problem is that the two scrollbars conflict due to the height and width of both, as this increases the width of the scrollbar and therefore it is hidden.

import flet as ft
 import pandas as pd
 
 def main(page: ft.Page):
     # Read the Excel file
     df = pd.read_excel(r'C:\Users.... .xlsx', header=2)
     print(df)
     # Create a DataTable control
     table = ft.DataTable(
         columns=[ft.DataColumn(ft.Text(col)) for col in df.columns],
         rows=[
             ft.DataRow(cells=[
                 ft.DataCell(ft.Text(str(row[col]))) for col in df.columns
             ]) for _, row in df.iterrows()
         ]
     )
     cl = ft.Column(
         height=500,
         scroll=ft.ScrollMode.HIDDEN,
     )
     row = ft.Row(
         width=500,
         scroll=ft.ScrollMode.ADAPTIVE,
     )
     row.controls.append(table)
     cl.controls.append(row)
     
     page.add(cl)
 
ft.app(target=main)