Layout issue

[SebastianSosa]

Hi,

I would like to generate the following layout:

Two columns, each one taking the full height of the page.

1. Column 1 contains items as Row objects.
2. Column 2 also contains items as Row objects, but each Row contains multiple Container objects, and each Row should have an independent scroll bar.

I managed to generate a basic layout that resembles what I want, but:

1. Column 1 does not take the full height.
2. In Column 2, there is a single scroll bar for all Row objects. Specifically, "Column 2 Row 2 item 1" and "Column 2 Row 2 item 2" should each have their own scroll bar, as well as "Column 2 Row 1 item 1" and "Column 2 Row 1 item 2".

Below is the code to reproduce my current layout

Thanks

def main2(page: ft.Page):

    searchArea = ft.Row(scroll="always")
    def buildContainer(text):
        return ft.Container(
                content=ft.Text(value=text),
                alignment=ft.alignment.center,
                width=page.width * 0.4,
                bgcolor=ft.colors.BLUE,
                border_radius=ft.border_radius.all(5))

    searchColumn = ft.Column(
            [
                buildContainer("Column 1 item 1"),
                buildContainer("Column 1 item 2"),
            ]
        )


    searchArea.controls.append(searchColumn) # searchArea.controls[0]

    searchArea.controls.append(
        ft.Column(
            [
                ft.Row([buildContainer("Column 2 Row 1 item 1"),buildContainer("Column 2 Row 1 item 2"),]), # First feed area
                ft.Row([buildContainer("Column 2 Row 2 item 1"),buildContainer("Column 2 Row 2 item 2"),]),
            ]
        ))
    page.add(searchArea) 


ft.app(main2)

[ap4499]

Running your code, I get this:

I'm trying to get my head around what you're looking to create, is it something like this?

[SebastianSosa]

Thank you for looking at this. I found a solution, the idea was to have independent scroll bar for each rows in column 2:

import flet as ft

def main2(page: ft.Page):

    searchArea = ft.Row(expand=1,
            vertical_alignment=ft.CrossAxisAlignment.START)

    def buildContainer(text):
        return ft.Container(
                content=ft.Text(value=text),
                alignment=ft.alignment.center,
                width=page.width * 0.4,
                bgcolor=ft.colors.BLUE,
                border_radius=ft.border_radius.all(5))

    searchColumn = ft.Column(
            [
                buildContainer("Column 1 item 1"),
                buildContainer("Column 1 item 2"),
            ],
        alignment=ft.MainAxisAlignment.START
        )

    searchArea.controls.append(searchColumn)  # searchArea.controls[0]

    searchArea.controls.append(
        ft.Column(
            [
                ft.Row([buildContainer("Column 2 Row 1 item 1"), buildContainer("Column 2 Row 1 item 2")],
                            scroll=ft.ScrollMode.ALWAYS,
                            expand=1
                            ),  # First feed area
                ft.Row([buildContainer("Column 2 Row 2 item 1"), buildContainer("Column 2 Row 2 item 2")],
                       expand=1,
                       scroll=ft.ScrollMode.ALWAYS),
                ],
            expand=1,
            scroll=ft.ScrollMode.ALWAYS,
            alignment=ft.MainAxisAlignment.START
        )
    )
    page.add(searchArea)

ft.app(main2)

[SebastianSosa]

As said in the comment, I found a solution for my issue:

import flet as ft

def main2(page: ft.Page):

    searchArea = ft.Row(expand=1,
            vertical_alignment=ft.CrossAxisAlignment.START)

    def buildContainer(text):
        return ft.Container(
                content=ft.Text(value=text),
                alignment=ft.alignment.center,
                width=page.width * 0.4,
                bgcolor=ft.colors.BLUE,
                border_radius=ft.border_radius.all(5))

    searchColumn = ft.Column(
            [
                buildContainer("Column 1 item 1"),
                buildContainer("Column 1 item 2"),
            ],
        alignment=ft.MainAxisAlignment.START
        )

    searchArea.controls.append(searchColumn)  # searchArea.controls[0]

    searchArea.controls.append(
        ft.Column(
            [
                ft.Row([buildContainer("Column 2 Row 1 item 1"), buildContainer("Column 2 Row 1 item 2")],
                            scroll=ft.ScrollMode.ALWAYS,
                            expand=1
                            ),  # First feed area
                ft.Row([buildContainer("Column 2 Row 2 item 1"), buildContainer("Column 2 Row 2 item 2")],
                       expand=1,
                       scroll=ft.ScrollMode.ALWAYS),
                ],
            expand=1,
            scroll=ft.ScrollMode.ALWAYS,
            alignment=ft.MainAxisAlignment.START
        )
    )
    page.add(searchArea)

ft.app(main2)