flet-dev / flet

Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.
https://flet.dev
Apache License 2.0
10.79k stars 417 forks source link

Column width ignored when set inside of a Container of a set width #3598

Open brycepg opened 2 months ago

brycepg commented 2 months ago

Duplicate Check

Describe the bug

The column width is completely ignored inside of a container

Code

import flet as ft

def main(page: ft.Page):
    display_elements = [
        ft.Text("FDS SDF SDF DSF SDF SD FDSF DS FDS FSD FDS DSF SD FDSFDS SDFDSFSD SDFFDSFDSF SDFDSFD SFDS FSDFDSF SD FDSF SDDFS FSDDFS FSD FSDF SDFSD")
    ]
    display_elements_column = ft.Column(display_elements, width=100, horizontal_alignment=ft.CrossAxisAlignment.CENTER)
    display_elements_column = ft.Container(
        display_elements_column,
        width=page.window.width,
        height=page.window.height,
    )
    page.add(display_elements_column)

ft.app(main)

To reproduce

Run code above -> no wrapping due to column width

delete container -> wrapping due to column width works fine

Expected behavior

No response

Screenshots

No response

Operating System

Linux

Operating system details

Fedora

Flet version

0.23.2

Regression

No, it isn't

Suggestions

No response

Additional details

No response

ndonkoHenri commented 2 months ago

What do you mean by "column width"? The column has no width prop. Can you please better explain?

brycepg commented 2 months ago

What do you mean by "column width"? The column has no width prop. Can you please better explain?

Apologies my example was wonky I made an edit, and added the width to the column.

The width property is ignored in the column when it's in the container. When the column is not in a container, the width property for the column works as intended and wraps the text to the width of the column

ndonkoHenri commented 2 months ago

Marking issue as bug. For now you can give Text a width:

ft.Text(
    "FDS SDF SDF DSF SDF SD FDSF DS FDS FSD FDS DSF SD FDSFDS SDFDSFSD SDFFDSFDSF SDFDSFD SFDS FSDFDSF SD FDSF SDDFS FSDDFS FSD FSDF SDFSD",
    width=100,
)
Working Flutter example (for dev-team) ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( width: 500, height: 500, color: Colors.red[200], child: Center( child: ConstrainedBox( constraints: BoxConstraints.tightFor(width: 100), child: Column( children: [ Text( "FDS SDF SDF DSF SDF SD FDSF DS FDS FSD FDS DSF SD FDSFDS SDFDSFSD SDFFDSFDSF SDFDSFD SFDS FSDFDSF SD FDSF SDDFS FSDDFS FSD FSDF SDFSD", ), ], ), ), ), ), ), ), ); } } ```