CODEWITHSUNDEEP
plotlyplotly-dashplotly-python
Pygirl
Pygirl

Reputation: 13349

Reducing the space between two layout components

As can be seen from the screenshot there is a huge space between dropdown and button. I want this button to be next to the dropdown. I tried styling but I ain't to reduce this huge space.

How to solve this problem?

Screenshot:

enter image description here

Code:

    import dash
    import dash_core_components as dcc
    import dash_html_components as html
    from dash.dependencies import Input, Output, State, MATCH, ALL
    import dash_bootstrap_components as dbc
    
    
    app = dash.Dash(__name__, suppress_callback_exceptions=True)
    
    app.layout = html.Div([
        html.Button("Add Filter", id="dynamic-add-filter", n_clicks=0),
        html.Div(id='dynamic-dropdown-container', children=[]),
    ])
    
    @app.callback(
        Output('dynamic-dropdown-container', 'children'),
        [Input('dynamic-add-filter', 'n_clicks')],
        [State('dynamic-dropdown-container', 'children')])
    def display_dropdowns(n_clicks, children):
        new_element = html.Div([
            dcc.Dropdown(
                id={
                    'type': 'dynamic-dropdown',
                    'index': n_clicks
                },
                options=[{'label': i, 'value': i} for i in ['NYC', 'MTL', 'LA', 'TOKYO']],
                style=dict(
                        width='40%',
                        # verticalAlign="middle"
                        # display='flex',
                        float="left",
                    )
            ),
            html.Button('Button 1', id='btn-nclicks-1', n_clicks=0, style={'margin-right': '35em'}),
    
    
            html.Div(
                id={
                    'type': 'dynamic-output',
                    'index': n_clicks
                }
            )
        ])
        children.append(new_element)
        return children
    
    
    @app.callback(
        Output({'type': 'dynamic-output', 'index': MATCH}, 'children'),
        [Input({'type': 'dynamic-dropdown', 'index': MATCH}, 'value')],
        [State({'type': 'dynamic-dropdown', 'index': MATCH}, 'id')],
    )
    def display_output(value, id):
    
        return  html.Div(children=[html.Div([
        html.Div('Dropdown {} = {}'.format(id['index'], value)),
        # html.Button('Button 1', id='btn-nclicks-1', n_clicks=0,  style={'float': 'right'}),
        ])
        ])
    
    
    if __name__ == '__main__':
        app.run_server(debug=True)

Upvotes: 2

Views: 2300

Answers (1)

coralvanda
coralvanda

Reputation: 6606

Set the div that contains the dropdown and the button to have the style display='flex', and change the dropdown's width from 40% to something like 200 so it isn't so wide. The button will fit right next to it then. Confirmed on my machine with those styles. The dropdown won't need the float='left' style either.

Upvotes: 2

Related Questions