Select component on Modal windows

[kevin-ks]

Select component does not display the drop down within the modal window. Sample code as below: (New to github and hence excuse the formatting). If fullScreen is set to False, I can see the dropdown appearing but on the background

import dash_mantine_components as dmc
from dash import html, Output, Input, State, callback
import dash

dash._dash_renderer._set_react_version('18.2.0')
app = dash.Dash(__name__, use_pages=True, suppress_callback_exceptions=True)

app.layout = html.Div(children=[
    dmc.MantineProvider([
        html.Div(
            [
                dmc.Button("Open Modal", id="modal-demo-button"),
                dmc.Modal(
                    title="New Modal",
                    id="modal-simple",
                    fullScreen=True,
                    zIndex=10000,
                    children=[
                        dmc.Text("I am in a modal component."),
                        dmc.Space(h=20),
                        dmc.Group(
                            [
                                dmc.Select(
                                    label="Select framework",
                                    placeholder="Select one",
                                    id="framework-select",
                                    value="ng",
                                    data=[
                                        {"value": "react", "label": "React"},
                                        {"value": "ng", "label": "Angular"},
                                        {"value": "svelte", "label": "Svelte"},
                                        {"value": "vue", "label": "Vue"},
                                    ],
                                    w=200,
                                    mb=10,
                                )
                            ],
                            justify="flex-end",
                        ),
                    ],
                ),
            ]
        )

    ])
])



@callback(
    Output("modal-simple", "opened"),
    Input("modal-demo-button", "n_clicks"),
    State("modal-simple", "opened"),
    prevent_initial_call=True,
)
def modal_demo(n_clicks,opened):
    return not opened


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

[deadkex]

The modal zIndex is too high.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Either remove/lower it from the modal or set it for your Select

[kevin-ks]

Thank you, that did the trick. I guess this is what happens when someone with no web development knowledge has a go at at web development. Thanks again