[BUG] dbc.Modal(style) is passed to fade-modal-show layer instead modal

[luggie]

dash                      2.16.1
dash_ag_grid              31.0.1
dash-bootstrap-components 1.6.0
dash-bootstrap-templates  1.1.2
dash-core-components      2.0.0
dash-html-components      2.0.0
dash-split                0.0.4
dash-table                5.0.0
dash-testing-stub         0.0.2

Expected behavior in test app: Modal should appear according to style parameters.

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dbc.Modal(
        [
            dbc.ModalHeader("Header"),
            dbc.ModalBody("This is the content of the modal"),
            dbc.ModalFooter(
                dbc.Button("Close", id="close", className="ml-auto")
            ),
        ],
        id="modal",
        is_open=True,
        style={
            "position": "absolute",
            "top": "10px",
            "left": "10px",
        }
    )
])


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

Instead, the style parameters are passed to the fade-modal-show layer:

Is this intended? If so, why?

[tcbegley]

Thanks for raising this, it does seem a bit weird to me too. It's react-bootstrap under the hood passing style arguments to the parent div rather than the dialog. Will take a look at how best to fix this.

In case there are people using style in its current form I'll be keen to see if there's a backwards compatible way of doing it, maybe a new prop like dialogStyle or similar.

[tcbegley]

I've just made a prerelease that exposes two new props: dialogStyle / dialog_style and contentStyle / content_style. They target the same HTML elements as dialogClassName and contentClassName respectively. In your example above you would want to set the position with dialogStyle.

Please test it out and let me know how you get on. I will likely make a full release in the near future.

pip install dash-bootstrap-components==1.6.1rc1

[luggie]

@tcbegley exactly what I needed. Thanks heaps!