[BUG] dcc.Dropdown aligns menu items incorrectly when using a nonzero margin

[J-Thus]

Environment

Python 3.13.5

dash                      3.1.1

- OS: Windows 11
- Browser: Firefox
- Version: 140.0.4 (64-bit)

Description

MWE:

import dash
from dash import dcc, html

app = dash.Dash(__name__)

dropdown_style = {
    "margin": "50px",
}


app.layout = html.Div(
    [
        dcc.Dropdown(
            id="drop-select",
            options=[
                {"label": "foo", "value": "foo"},
                {"label": "bar", "value": "bar"},
            ],
            value="foo",
            style=dropdown_style
        ),
    ]
)


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

Adjusting the margin doesn't affect the dropdown and its items in the same way. The items are positioned incorrectly. Also affected by "margin-left".

Expected behavior

The items should be flush with the dropdown.

Screenshots

Bug with margin of 50px.

Expected behavior (reproduced without using a margin).

[AnnMarieW]

Hi @J-Thus

The sttyle prop is applied to the outer div of the component. In this case, the margin is only applied to the input field of the Dropdown component. To target the dropdown menu use Select-menu-outer class name

Try adding this to a .css file in the /assets folder:

.Select-menu-outer {
    margin-left: 50px;
}