Skip to content

ResponsiveRow will not render correctly  #1951

@Novaspace

Description

@Novaspace

Description

My program will update the page dynamically on the value from Dropdown menu. Its working with Row and Column but not with ResponsiveRow. Just the first control will be placed on the desired position but all other will be placed on top left.

Code example to reproduce the issue:

import flet as ft
    
def main(page: ft.Page):
    rail = ft.NavigationRail(
        selected_index=0,
        label_type=ft.NavigationRailLabelType.ALL,
        min_width=100,
        min_extended_width=400,
        group_alignment=-0.9,
        destinations=[
            ft.NavigationRailDestination(
                icon=ft.icons.SCREENSHOT_MONITOR,
                selected_icon=ft.icons.SCREENSHOT_MONITOR_ROUNDED,
                label="Lable 1",
            ),
            ft.NavigationRailDestination(
                icon_content=ft.Icon(ft.icons.ROCKET_LAUNCH_OUTLINED),
                selected_icon_content=ft.Icon(ft.icons.ROCKET_LAUNCH_ROUNDED),
                label="Lable 2",
            ),
            ft.NavigationRailDestination(
                icon=ft.icons.SETTINGS_OUTLINED,
                selected_icon_content=ft.Icon(ft.icons.SETTINGS),
                label_content=ft.Text("Lable 3"),
            ),
        ],
    )

    def dropdown_changed(e):
        test_actions.clean()
        # test_actions.controls.append(ft.Row([ft.Text('Update Text 1'), ft.TextField(label="update TextField 1"),ft.Text('Update Text 2'), ft.TextField(label="update TextField 2")]))
        # test_actions.controls.append(ft.Column([ft.Text('Update Text 1'), ft.TextField(label="update TextField 1"),ft.Text('Update Text 2'), ft.TextField(label="update TextField 2")]))
        test_actions.controls.append(ft.ResponsiveRow([ft.Text('Update Text 1'), ft.TextField(label="update TextField 1"),ft.Text('Update Text 2'), ft.TextField(label="update TextField 2")]))
        test_actions.update()

    
    dd = ft.Dropdown(
        on_change=dropdown_changed,
        label="action",
        hint_text="Choose a action",
        options=[
            ft.dropdown.Option("Click"),
        ],
        width=200,
    )


    test_actions = ft.Row([
        ft.Text("Text 1"), 
        ft.Text("Text 2"), 
        ft.TextField(label="TextField 1"), 
        ft.TextField(label="TextField 2")
    ])

    test_wizard_view = ft.View(
                    route="/test_wizard",
                    controls=[
                        ft.Row(
                            controls=[
                                rail,
                                ft.VerticalDivider(width=1),
                                ft.Column([dd, test_actions]),
                            ],
                            expand=True
                        )
                    ]
                )
    
    def route_change(e: ft.RouteChangeEvent):
        print('Route change:', e.route)
        page.views.clear()  
        if page.route == "/test_wizard":
            page.views.append(test_wizard_view)
        page.update()

    page.on_route_change = route_change
    page.go("/test_wizard")

ft.app(target=main)

Describe the results you received:

image

Describe the results you expected:

Should render like Row or Column
Additional information you deem important (e.g. issue happens only occasionally):

Flet version (pip show flet):

pip.exe show flet
Name: flet
Version: 0.10.3
Summary: Flet for Python - easily build interactive multi-platform apps in Python
Home-page:
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0
Location: c:\users\z00354dm\appdata\local\pypoetry\cache\virtualenvs\sikuli-test-wizard-vwjkhlrs-py3.10\lib\site-packages
Requires: copier, flet-runtime, packaging, qrcode, watchdog, websocket-client, websockets
Required-by:

Operating system:

Windows
Additional environment details:

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

👀 In review

Relationships

None yet

Development

No branches or pull requests

Issue actions