[bug] FlexGrow With MultiSelect

[sssaha]

The expectation was the Multiselect will grow to take all available space and the Menu button will be just there. I am using flexGrow - was trying to play with align and justify parameters and nothing seems to force the multiselect to take all available space.

dash._dash_renderer._set_react_version('18.2.0')
app = Dash(__name__, url_base_pathname="/", external_stylesheets=[dbc.themes.BOOTSTRAP] + dmc.styles.ALL)

app.layout = dmc.MantineProvider(children=[dmc.Grid([
    dmc.GridCol(span=6, p=20, m=20, children=dmc.Group(
        [
            dmc.MultiSelect(label='Select Data', id='database_specific_input_selection_batch_processing', searchable=True, clearable=True,
                            leftSection=DashIconify(icon="radix-icons:magnifying-glass"), style={'flexGrow': 1},
                            description="If no specific data is selected, functions will be applied to all filtered data."),
            dmc.Menu(children=[
                dmc.MenuTarget(dmc.ActionIcon(DashIconify(icon="solar:filter-bold"), variant="filled", size='lg', color='blue', id='filter_batch_processing_menu', disabled=True)),
                dmc.MenuDropdown(
                    children=[
                        dmc.MenuItem('Filtering Menu', color='blue', id='filter_batch_processing_data', ),
                        dmc.MenuItem('Reset to Default Filter', color='red', id='reset_batch_processing_data_under_menu', )
                    ]
                ),
            ]),

        ], align='flex-end', justify='space-around'

    )),

]),
])

if __name__ == "__main__":
    app.run_server(debug=True)

Is it something I am doing wrong?

[AnnMarieW]

Hi @sssaha

Looks like you found a bug - what you have should work.

To simplify, this MultiSelect should be full width, and it is not.

dmc.Group(dmc.MultiSelect(style={"flexGrow":1))

A workaround is to wrap the MultiSelect in another component, such as an html.Div or a dmc.Box and apply the style to that container. For example:

dmc.Group(dmc.Box(dmc.MultiSelect(), style={"flexGrow":1))

The issue is this extra div on the dmc.MultiSelect which is preventing the style from being applied correctly.

[sssaha]

Thanks - I am hoping we will get it fixed in the next release - for now I will follow your advice.