Dropdown arrow sdissapears of dashboard

[aestebanpl]

Hi every one:

Recenlty i’m facing this issue, every time i’m aligning dropdown menus when i use {‘display’:‘inline-block’} option style, dropdwon arrow dissapears. The only solution i’ve found was to put dropdown inside a Div. is this a kind of Bug or maybe is this my mistake?

here’s the code:

from dash import Dash, dcc, html, Input, Output, callback
import os


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = Dash(__name__, external_stylesheets=external_stylesheets)

server = app.server

app.layout = html.Div([
    html.H1('Hello World'),
    html.Div([
        html.Div([
        dcc.Dropdown(['LA', 'NYC', 'MTL'],
            'LA',
            id='dropdown',
            
        )
        ],style={'display':'inline-block','width':'300px'}),
        
        dcc.Dropdown(['LA', 'NYC', 'MTL'],
            'LA',
            id='dropdown1',
            style={'display':'inline-block','width':'300px'}
        )
    ]),
    html.Div(id='display-value')
])
@callback(Output('display-value', 'children'), Input('dropdown', 'value'))
def display_value(value):
    return f'You have selected {value}'

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

[CNFeffery]

You can use AntdSpace or AntdCompact in feffery-antd-components, specially, AntdCompact automatically merges repeated border lines inside adjacent AntdSelect for a more coordinated look:

import dash
from dash import html
import feffery_antd_components as fac

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdTitle("with AntdSpace", level=4),
        fac.AntdSpace(
            [
                fac.AntdSelect(
                    placeholder="demo select1",
                    options=[f"option{i}" for i in range(1, 6)],
                ),
                fac.AntdSelect(
                    placeholder="demo select2",
                    options=[f"option{i}" for i in range(1, 6)],
                ),
            ],
            size=0,
        ),
        fac.AntdTitle("with AntdCompact", level=4),
        fac.AntdCompact(
            [
                fac.AntdSelect(
                    placeholder="demo select1",
                    options=[f"option{i}" for i in range(1, 6)],
                ),
                fac.AntdSelect(
                    placeholder="demo select2",
                    options=[f"option{i}" for i in range(1, 6)],
                ),
            ]
        ),
    ],
    style={"padding": 50},
)

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

related documents:

https://fac.feffery.tech/AntdSelect
https://fac.feffery.tech/AntdSpace
https://fac.feffery.tech/AntdCompact