flet icon indicating copy to clipboard operation
flet copied to clipboard

Value text overflow in Dropdown

Open torablien opened this issue 1 year ago • 1 comments

Filing a new issue per @ndonkoHenri in https://github.com/flet-dev/flet/issues/3231#issuecomment-2198727981

Is there an option or configuration to address overflow of value text in a Dropdown?

Example:

image
import flet as ft


def main(page: ft.Page):
    text_style = ft.TextStyle(
        overflow=ft.TextOverflow.ELLIPSIS,
    )
    str_options = [
        "A really large option string that can take up a lot of space so it will likely overflow but it shouldn't go outside the dropdown area itself",
        "Option 2",
        "Option 3",
    ]
    options = [
        ft.dropdown.Option(str_option, text_style=text_style)
        for str_option in str_options
    ]
    dropdown = ft.Dropdown(options=options, value=str_options[0], text_style=text_style)
    container_with_border = ft.Container(
        content=dropdown, border=ft.border.all(1, "RED")
    )
    page.add(container_with_border)


ft.app(main)

torablien avatar Aug 28 '24 22:08 torablien

This is creating very ugly UI 🤷‍♂️. Any good ideas or workaround ?

mxav1111 avatar Oct 12 '24 02:10 mxav1111

This is creating very ugly UI 🤷‍♂️. Any good ideas or workaround ?

Ok. Solution is add newline \n to keep it under the limit.

mxav1111 avatar Nov 02 '24 02:11 mxav1111

Should be fixed now. Let know if you have further issues.

import flet as ft


def main(page: ft.Page):
    options = [
        "A really large option string that can take up a lot of space so it will likely overflow but it shouldn't go outside the dropdown area itself",
        "Option 2",
        "Option 3",
    ]

    page.add(
        ft.Container(
            border=ft.Border.all(1, "RED"),
            content=ft.Dropdown(
                options=[ft.DropdownOption(o) for o in options],
                value=options[0],
            ),
        )
    )


ft.run(main)
Image

ndonkoHenri avatar Nov 03 '25 01:11 ndonkoHenri