Dropdown menu extented

Dash Python
1

My dropdown menu is really extended, how can I format it correctly? the other dropdown shows a suitable size when I use 10% with all the values are integers.

image_00262
image_00262900×80 8.79 KB 

        dcc.Dropdown(id='dropdown-map',
                     options=[
                         {'label': "open-street-map", 'value': "open-street-map"},
                         {'label': "satellite", 'value': "satellite"},
                     ],
                     value="open-street-map",
                     style={'width': '30%', 'display': 'inline-block', 'verticalAlign': 'middle'}
                     ),
2

What happens when you remove the styling?

3

Could you post the complete code? i don’t think the problem is with the dropdown but with the div where probably have the 3 dropdowns. The div is probably bigger that the space of the 3 dropdowns and when you open options it uses the div size, not the dropdown menu size.

4 
    html.Div([

        html.Div(
            html.P('Unit'),
            style={'display': 'inline-block', 'padding': '10px'},
        ),

        html.Div(
            dcc.Dropdown(id='unit-picker',
                         options=unit_list,
                         placeholder='Select Unit',
                         value='4317'), style={'width': '10%', 'display': 'inline-block', 'verticalAlign': 'middle'},
        ),

        html.Div(
            html.P('Date'),
            style={'display': 'inline-block', 'padding': '10px'},
        ),
        dcc.DatePickerSingle(
            id='my-date-picker-single',
            display_format="DD-MM-YYYY",
            initial_visible_month=dt.now(),
            # date=str(dt(2020, 1, 28)),
            placeholder='Select Date',
            style={'display': 'inline-block', }
        ),

        html.Div(
            html.P('Centre Location'),
            style={'display': 'inline-block', 'padding': '10px'},
        ),

        html.Div(
            dcc.Dropdown(id='feature_list_code_lat_lon',
                         options=feature_list_code_lat_lon,
                         placeholder='Select Feature',
                         value=selected_centre_value),
            style={'width': '15%', 'display': 'inline-block', 'verticalAlign': 'middle'},
        ),

        html.Div(
            html.P('Map View'),
            style={'display': 'inline-block', 'padding': '10px'},
        ),


        dcc.Dropdown(id='dropdown-map',
                     options=[
                         {'label': "Open Street Map", 'value': "open-street-map"},
                         {'label': "Satellite", 'value': "satellite"},
                     ],
                     value="open-street-map",
                     style={'width': '30%', 'display': 'inline-block', 'verticalAlign': 'middle'}
                     ),


        html.Button(id='submit-button',
                    n_clicks=0,
                    children='Submit',


                    ),



    ]),
5

It’s hard to help if you don’t give me a minimal reproducible example. I’m not that good that i can look at your code and figure out what the problem is :-/

6

The code uses SQL queries from a company database and makes data frame from it. I am unable to share code.

It’s ok, and I’ll make a different div and see if I can remove this problem as its not a high priority.

Will keep you updated if you are interested.

7

Div in a Div worked for me.

div_in_div
div_in_div1124×126 13.9 KB 

    html.Div([

        html.Div(
            html.P('Unit'),
            style={'display': 'inline-block', 'padding': '10px'},
        ),

        html.Div(
            dcc.Dropdown(id='unit-picker',
                         options=unit_list,
                         placeholder='Select Unit',
                         value='4317'), style={'width': '10%', 'display': 'inline-block', 'verticalAlign': 'middle'},
        ),

        html.Div(
            html.P('Date'),
            style={'display': 'inline-block', 'padding': '10px'},
        ),
        dcc.DatePickerSingle(
            id='my-date-picker-single',
            display_format="DD-MM-YYYY",
            initial_visible_month=dt.now(),
            # date=str(dt(2020, 1, 28)),
            placeholder='Select Date',
            style={'display': 'inline-block', }
        ),

        html.Div(
            html.P('Centre Location'),
            style={'display': 'inline-block', 'padding': '10px'},
        ),

        html.Div(
            dcc.Dropdown(id='feature_list_code_lat_lon',
                         options=feature_list_code_lat_lon,
                         placeholder='Select Feature',
                         value=selected_centre_value),
            style={'width': '15%', 'display': 'inline-block', 'verticalAlign': 'middle'},
        ),

        html.Div(
            html.P('Map View'),
            style={'display': 'inline-block', 'padding': '10px'},
        ),

        html.Div(
        dcc.Dropdown(id='dropdown-map',
                     options=[
                         {'label': "Open Street Map", 'value': "open-street-map"},
                         {'label': "Satellite", 'value': "satellite"},
                     ],
                     value="open-street-map",
                     #style={'width': '30%', 'display': 'inline-block', 'verticalAlign': 'middle'}
                     ), style={'width': '10%', 'display': 'inline-block', 'verticalAlign': 'middle'}
        ),

        html.Button(id='submit-button',
                    n_clicks=0,
                    children='Submit',

                    ),

    ]),