[Question] How to 'force' Dropdown in a ResponsiveRow to visually react to col property?

[Jon-Al]

Question

In the previous version of Dropdown (Dropdown2), options_fill_horizontally allowed to fill the options horizontally, but the same cannot be done with the new Dropdown. The result is a visually inconsistent (and unappealing) UI.
I would like to make my Drowdowns visually consistent with other controls when placing it inside a ResponsiveRow. How can I "make" that happen?

Below is an example of some of my attempts at forcing it to happen. So far, I could not make it work.

Thank you in advance!

Code sample

Updated

from flet import Dropdown, DropdownOption, ResponsiveRow, Page, app, ThemeMode, Text
from flet.core.colors import Colors
from flet.core.column import Column
from flet.core.divider import Divider
from flet.core.dropdownm2 import DropdownM2, Option as Option2
from flet.core.text_style import TextThemeStyle


def main(page: Page):
    def update_text1(e):
        text1.value = "Dropdown: " + drp1.value
        page.update()

    def update_text2(e):
        text2.value = "Dropdown M2: " + drp1.value
        page.update()

    page.theme_mode = ThemeMode.LIGHT
    ###########################
    ####     Dropdown      ####
    ###########################
    header_1 = Text("Dropdown:", theme_style=TextThemeStyle.BODY_LARGE, col=12)
    text1 = Text(col=12)
    tiles = [DropdownOption(key=f"Tile {x}",
                            content=Text(f"Tile {x}", col={'xs':  12, 'sm': 10, 'md': 8, 'lg': 6, 'xl': 4,
                                                           'xxl': 2}, expand=True)) for x in range(1, 10)]
    drp1 = Dropdown(options=tiles, on_change=update_text1, expand=True,
                    col={'xs': 12, 'sm': 10, 'md': 8, 'lg': 6, 'xl': 4, 'xxl': 2})
    row1 = ResponsiveRow([header_1, drp1, text1])
    ###########################
    ####   DropdownM2      ####
    ###########################

    header_2 = Text("DropdownM2:", theme_style=TextThemeStyle.BODY_LARGE, col=12)
    text2 = Text(col=12)
    tiles2 = [Option2(key=f"Tile {x}",
                      content=Text(f"Tile {x}", col={'xs':  12, 'sm': 10, 'md': 8, 'lg': 6, 'xl': 4,
                                                     'xxl': 2}, expand=True)) for x in range(1, 10)]
    drp2 = DropdownM2(options=tiles2, on_change=update_text2, expand=True,
                      # Difference:
                      options_fill_horizontally=True,
                      # End Difference
                      col={'xs': 12, 'sm': 10, 'md': 8, 'lg': 6, 'xl': 4, 'xxl': 2})
    row2 = ResponsiveRow([header_2, drp2, text2])
    page.add(Column([
        row1, Divider(2, 2, Colors.BLACK),
        row2
    ]))
    page.update()


app(main)

Error message

No response

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

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

[ndonkoHenri]

For better comparison, can you please share two code samples:

• using DropdownM2 to show the desired behaviour
• using Dropdown to show the issue

[Jon-Al]

Thank you, updated the code block to demonstrate my issue.

I added a Divider to make it easier to see. Also formatted the code so there's clear separation.

In the code, the main difference is the additional line in the DropdownM2 (drp2), where I added options_fill_horizontally=True. I added a comments before and after that line to make it easier to spot.

[ndonkoHenri]

For now you can set width=page.width in the Dropdown.