dash-core-components [BUG] margin-left in dcc.Dropdown does not update the "dropdown"

[BUG] margin-left in dcc.Dropdown does not update the "dropdown"

Open pfbuxton opened this issue 5 years ago • 5 comments

Example:

import dash
import dash_html_components as html
import dash_core_components as dcc

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montreal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='NYC',
        style={ 'width':'400px', 'margin-left':'150px' }
    ),
    html.Div(id='output-container')
])

@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('my-dropdown', 'value')])
def update_output(value):
    return 'You have selected "{}"'.format(value)

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

Result: bug

Note, you could put the dcc.Dropdown inside a Div, but this does not always work as you can have the "dropdown" overlapping other interactive elements making them non-interactable.