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

**URL:** <https://community.plotly.com/t/how-do-i-fix-the-height-of-the-multi-true-in-dash-dropdown/77426>\
**Category:** Dash Python\
**Created:** [August 3, 2023, 7:07pm UTC](https://community.plotly.com/t/how-do-i-fix-the-height-of-the-multi-true-in-dash-dropdown/77426 "2023-08-03T19:07:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![zaphire121](https://avatars.discourse-cdn.com/v4/letter/z/ed655f/32.png) [@zaphire121](https://community.plotly.com/u/zaphire121)\
**Post date:** [August 3, 2023, 7:07pm UTC](https://community.plotly.com/t/how-do-i-fix-the-height-of-the-multi-true-in-dash-dropdown/77426/1 "2023-08-03T19:07:59Z")

</div>

Good afternoon!

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

![2023-08-03 21_01_57-Dash, группа группа 2 — Яндекс Браузер](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/c/e/cebe2f2cc1458e0593aae7b193c7ff651830f2d7.png)

As a result, I need to get this :  
([Multi Select #6](https://preview.colorlib.com/theme/bootstrap/multiselect-16/))

 ![2023-08-03 21_04_27-Multi Select #6, группа группа 2 — Яндекс Браузер](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/7/6/76ac0eeea0c30692399fe4cd3a3d39415fc9ca23.png)

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

My code :

```css
.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;
}

```

```python
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)

```

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [August 3, 2023, 7:36pm UTC](https://community.plotly.com/t/how-do-i-fix-the-height-of-the-multi-true-in-dash-dropdown/77426/2 "2023-08-03T19:36:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zaphire121](https://avatars.discourse-cdn.com/v4/letter/z/ed655f/32.png) [@zaphire121](https://community.plotly.com/u/zaphire121)\
**Post date:** [August 3, 2023, 8:21pm UTC](https://community.plotly.com/t/how-do-i-fix-the-height-of-the-multi-true-in-dash-dropdown/77426/3 "2023-08-03T20:21:08Z")

</div>

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  
 ![2023-08-03 22_18_57-Window](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/7/e/7e04d8cfb63681170766bec8382a3b3ae34b3be0.png)

Thanks for your answer AIMPED

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [August 3, 2023, 9:19pm UTC](https://community.plotly.com/t/how-do-i-fix-the-height-of-the-multi-true-in-dash-dropdown/77426/4 "2023-08-03T21:19:41Z")

</div>

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

```python
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()

```

![gif](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/8/e/8e91f0d1abb531dcad02e3f26a2eec280ea91514.gif)  
mred dropdown checklist

---

<div class="post-metadata">

**Author:** ![zaphire121](https://avatars.discourse-cdn.com/v4/letter/z/ed655f/32.png) [@zaphire121](https://community.plotly.com/u/zaphire121)\
**Post date:** [August 4, 2023, 6:09pm UTC](https://community.plotly.com/t/how-do-i-fix-the-height-of-the-multi-true-in-dash-dropdown/77426/5 "2023-08-04T18:09:53Z")

</div>

Hi @AIMPED , thx  
 ![Анимация](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/5/95aa3d820b8569c580400d7e38417ae094ec3486.gif)

```auto
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)

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

```

![Анимация123](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/c/f/cf4fc3b354d0e9977684b05e7bf5567a462ca8eb.gif)

---

<div class="post-metadata">

**Author:** ![ArchieMarques](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/archiemarques/32/28615_2.png) [@ArchieMarques](https://community.plotly.com/u/ArchieMarques)\
**Post date:** [July 25, 2024, 9:16pm UTC](https://community.plotly.com/t/how-do-i-fix-the-height-of-the-multi-true-in-dash-dropdown/77426/6 "2024-07-25T21:16:34Z")

</div>

The hover animation is applied to the label.

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

**assets/style.css:**

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

```

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

**assets/style.css:**

```css
input {
  margin: 0 0.5rem;
}

```

Here is the final CSS with these changes:

**assets/style.css:**

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

input {
  margin: 0 0.5rem;
}

```

![screen-record](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/4/e4b4fd1141bfde6fc23021cfcdd99cf12b73180a.gif)

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.