Dash右侧Navbar下拉菜单被截断问题求助

问题描述 #

我是Dash新手，正在设计仪表盘布局，参考示例采用Navbar组件。当前问题是：在右侧添加DropdownMenu后，菜单展开时部分内容不可见。我使用了fluid=True属性，附上代码及问题截图，请问如何让右侧下拉菜单完全显示？

原代码 #

import dash_bootstrap_components as dbc
from dash import Dash, html

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
header = dbc.Navbar(
    dbc.Container(
        [
            html.A(
                dbc.Row(
                    dbc.Col(dbc.NavbarBrand("Analytics", className="ms-2")),
                    align="center",
                    className="g-0",
                ),
                href="/",
                style={"textDecoration": "none"},
            ),
            dbc.Row(
                [
                    dbc.NavbarToggler(id="navbar-toggler"),
                    dbc.Collapse(
                        dbc.Nav(
                            [
                                dbc.NavItem(dbc.NavLink("Home")),
                                dbc.NavItem(dbc.NavLink("Page 1")),
                                dbc.NavItem(
                                    dbc.NavLink("Page 2"),
                                    # add an auto margin after page 2 to
                                    # push later links to end of nav
                                    className="me-auto",
                                ),
                                dbc.NavItem(dbc.NavLink("Help")),
                                dbc.NavItem(dbc.NavLink("About")),
                                dbc.DropdownMenu(
                                    [
                                        dbc.DropdownMenuItem("Home"),
                                        dbc.DropdownMenuItem("Some Long Item"),
                                    ],
                                    class_name="mr-1",
                                    label="Menu",
                                ),
                            ],
                            # make sure nav takes up the full width for auto
                            # margin to get applied
                            className="w-100",
                        ),
                        id="navbar-collapse",
                        is_open=False,
                        navbar=True,
                    ),
                ],
                # the row should expand to fill the available horizontal space
                className="flex-grow-1",
            ),
        ],
        fluid=True,
    ),
    dark=True,
    color="dark",
)


app.layout = html.Div(
    [header, dbc.Container(html.P("This is some content"), className="p-5")]
)

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

问题截图 #

解决方法 #

问题根源是Navbar默认启用了overflow-hidden样式，导致下拉菜单超出导航栏范围的部分被隐藏。同时下拉菜单的默认位置也容易出现截断，需要调整定位方式：

• 给dbc.Navbar添加style={"overflow": "visible"}，取消溢出隐藏限制
• 给dbc.DropdownMenu设置placement="bottom-end"，让菜单从右下角展开，避免被页面边缘截断；同时添加menu_variant="dark"匹配导航栏的深色主题

修改后的完整代码 #

import dash_bootstrap_components as dbc
from dash import Dash, html

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
header = dbc.Navbar(
    dbc.Container(
        [
            html.A(
                dbc.Row(
                    dbc.Col(dbc.NavbarBrand("Analytics", className="ms-2")),
                    align="center",
                    className="g-0",
                ),
                href="/",
                style={"textDecoration": "none"},
            ),
            dbc.Row(
                [
                    dbc.NavbarToggler(id="navbar-toggler"),
                    dbc.Collapse(
                        dbc.Nav(
                            [
                                dbc.NavItem(dbc.NavLink("Home")),
                                dbc.NavItem(dbc.NavLink("Page 1")),
                                dbc.NavItem(
                                    dbc.NavLink("Page 2"),
                                    className="me-auto",
                                ),
                                dbc.NavItem(dbc.NavLink("Help")),
                                dbc.NavItem(dbc.NavLink("About")),
                                dbc.DropdownMenu(
                                    [
                                        dbc.DropdownMenuItem("Home"),
                                        dbc.DropdownMenuItem("Some Long Item"),
                                    ],
                                    class_name="mr-1",
                                    label="Menu",
                                    placement="bottom-end",  # 设置菜单展开位置
                                    menu_variant="dark"      # 匹配深色导航栏
                                ),
                            ],
                            className="w-100",
                        ),
                        id="navbar-collapse",
                        is_open=False,
                        navbar=True,
                    ),
                ],
                className="flex-grow-1",
            ),
        ],
        fluid=True,
    ),
    dark=True,
    color="dark",
    style={"overflow": "visible"}  # 取消溢出隐藏
)


app.layout = html.Div(
    [header, dbc.Container(html.P("This is some content"), className="p-5")]
)

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

内容的提问来源于stack exchange，提问作者Micmizer