CSS sticky property not working as expected

Dash Python
1

Hi all,

I have following app:

from dash import Dash, html, Input, Output, State, Patch, callback
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
# dash_mantine_components==0.12.1


def area_view(id_idx):
    return dbc.Card(children=[
        dbc.Row(children=[html.P(f"Added row #: {id_idx}")]),
    ],
    id={"type" : "area-view", "index": id_idx},
    style={"padding" : "15px"})

tab_A = html.Div(html.P("A"))
tab_B = html.Div(html.P("B"))
tab_C = html.Div(children=[
    dbc.Card(children=[
        dbc.CardHeader(children=[
            dbc.Button(children=[
                "Toggle Settings"
            ], 
            id="hide", outline=True)
        ]),

        dbc.Collapse(children=[
            dbc.CardBody(children=[
                dbc.Row(children=[
                    dbc.Col(children=[
                        html.Div(children=[
                            html.P("Settings"),
                            dbc.Button("Add row", n_clicks=0, id="button-add-component")
                        ])
                    ]),
                ])
            ])
        ],
        is_open=True, id="settings-container")
    ],
    className="floating-card-settings"
    ),

    html.Div(children=[], id="add-area")
])


@callback(
    Output("add-area", "children"),
    Input("button-add-component", "n_clicks")
)
def add_row(clicks):
    if clicks:
        patched_children = Patch()

        row = area_view(clicks)

        patched_children.append(row)

        return patched_children

@callback(
    Output("settings-container", "is_open"),
    Input("hide", "n_clicks"),
    State("settings-container", "is_open")
)
def hide_settings(n, is_open):
    if n:
        return not is_open

layout = html.Div([
    dmc.Tabs(children=[
        dmc.TabsList(children=[
            dmc.Tab(name, value=name) for name in ["A", "B", "C"]
        ], grow=True),

        dmc.TabsPanel(tab_A, value="A"),
        dmc.TabsPanel(tab_B, value="B"),
        dmc.TabsPanel(tab_C, value="C"),
    ], value="C")
])

def main() -> None:
    app = Dash(external_stylesheets=[dbc.themes.ZEPHYR, dbc.icons.BOOTSTRAP], prevent_initial_callbacks=True)
    app.layout = layout
    app.run(debug=True, port=7777)

if __name__ == "__main__":
    main()

and a .css sheet:

.floating-card-settings {
  position: sticky !important;
  top: 0 !important;
}

I want that the dbc.Card with the settings and button always stays at the top. However when I add a few rows, the “Settings Card” disappears.
The idea behind is, that I want to have access to the settings windows at any time without scrolling up to the top of the page.

Maybe I missunderstood the “sticky” property.

Any hint is highly appreciated. Thanks.