How do I fix the height of the multi=True in Dash Dropdown?

[zaphire121]

Good afternoon!

I need help. How i can fix height increase dcc.Dropdown

As a result, I need to get this :
(Multi Select #6)

New options in dcc.Dropdown should not increase the height of the selector (and width).

My code :

.Select-value-label {
  max-width: 150px;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

.Select-control {
  min-width: 31vw;
  max-width: 31vw;
    max-height: 12vh;
  position: relative;
}

from dash import dcc, html, Input, Output, State, Dash, no_update
import dash_bootstrap_components as dbc



app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, "styles .css"], suppress_callback_exceptions=True)

app.layout = dcc.Dropdown(
    options=[
        {'label': 'Option A', 'value': 'A'},
        {'label': 'Option B', 'value': 'B'},
        {'label': 'Option Really Long 1', 'value': 'C'},
        {'label': 'Option Really Long 2', 'value': 'D'},
        {'label': 'Option Really Long 3', 'value': 'F'},
        {'label': 'Option Really Long 4', 'value': 'G'},
        {'label': 'Option Really Long 5', 'value': 'I'},
        {'label': 'Option Really Long 6', 'value': 'K'},
        {'label': 'Option Really Long 7', 'value': 'P'},
    ],
    optionHeight=40,
    maxHeight=300,
    multi=True,
    style={
        'width': '31vw',
        'max-width': '31vw',
    }
)

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

[AIMPED]

HI @zaphire121 welcome to the forums.

Interesting question, but unfortunately I don’t think thats possible. For deselection of the selected options, they have to be clickable, hence visible.

[zaphire121]

Maybe you can suggest a similar selector where the user can select a value and when selecting a large number of values, the selector will only … Maybe there are analogues dcc.Dropdown

Thanks for your answer AIMPED

[AIMPED]

Hey @zaphire121 here a quick & dirty solution to emulate this kind of behaviour:

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc, Input, Output

options = [f'option_{idx}' for idx in range(20)]

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    html.Div(
        html.Div(
            [
                html.Div(
                    id='view',
                    style={
                        'height': '38px',
                        'width': '200px',
                        'border': '1px solid',
                        'padding-right': '5px',
                        'textAlign': 'center',
                        'overflow': 'hidden',
                        'font-size': '20px'
                    },
                ),
                dbc.DropdownMenu(
                    align_end=True,
                    children=[
                        dbc.DropdownMenuItem([
                            dcc.Checklist(
                                id='check',
                                options=options
                            ),
                        ])

                    ],
                ),
            ],
            className='hstack',
        )
    )
)


@app.callback(
    Output('view', 'children'),
    Input('check', 'value'),
    prevent_initial_call=True
)
def show(selected):
    return ', '.join(selected)


if __name__ == '__main__':
    app.run()

mred dropdown checklist

[zaphire121]

Hi @AIMPED , thx

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc, Input, Output
from sql_execute import get_list_lpu

options = [f'option_{idx}' for idx in range(20)]

dropdown_items_list = []

for idx, items in enumerate(options):
    dropdown_item = dbc.DropdownMenuItem(
        children=[
            dcc.Checklist(
                id=f"check-{idx}",
                options=[items],
            )
        ],
        id=f"dropdown-item-{idx}"
    )
    dropdown_items_list.append(dropdown_item)

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    html.Div(
        html.Div(
            [
                html.Div(
                    id='view',
                    style={
                        'display': 'flex',
                        'height': '38px',
                        'width': '29vw',
                        'border': '1px solid',
                        'padding-right': '5px',
                        'textAlign': 'center',
                        'overflow': 'hidden',
                        'font-size': '20px'
                    },
                ),
                    dbc.DropdownMenu(
                        id="dropdown-menu",
                        align_end=True,
                        children=dropdown_items_list
                    ),
            ],
            className='selector_containerFinal',
            style={
                'justify-content': 'center'
            },
        ),
    ),
])

def generate_input_ids(prefix, values):
    return [Input(f"{prefix}-{value}", "value") for value in values]

@app.callback(
    Output('view', 'children'),
    generate_input_ids('check', range(len(options))),
    prevent_initial_call=True
)
def show(*selected_values):
    selected = [val for sublist in selected_values if sublist is not None for val in sublist]  # Плоский список выбранных значений с проверкой на None
    return ', '.join(selected)

if __name__ == '__main__':
    app.run(debug=True)

How i can fix dropdown-menu show dropdown-menu-end. I need the menu not to close when an item is selected

In case I use only dcc.Checklist, no selection animation (Hover effect)

for idx, items in enumerate(options):
    dropdown_item =  dcc.Checklist(
                id=f"check-{idx}",
                options=[items],
            )
    dropdown_items_list.append(dropdown_item)

[ArchieMarques]

The hover animation is applied to the label.

I created my selection animation by adding this code to my CSS:

assets/style.css:

label:hover {
  background-color: #c9e75d;
}

And to create space between the text and the selection text, I added:

assets/style.css:

input {
  margin: 0 0.5rem;
}

Here is the final CSS with these changes:

assets/style.css:

label:hover {
  background-color: #c9e75d;
}

input {
  margin: 0 0.5rem;
}

Edit: Sorry for reviving this thread. Recently, I had a similar problem, and I think this solution could be useful for someone in the future.