Setting style causes layout issue

Using the latest versions of Dash, Dash-bootstrap-components, etc. I notice the following behavior using the code below. Does anybody know what I am missing and/or doing wrong?

When the style statement is commented out, the form layout is correct (1 row w/ 2 columns)

When the style statement is in use, the form layout has all components in 1 column)

import dash_bootstrap_components as dbc
import dash
from dash import html as html

app = dash.Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    # these meta_tags ensure content is scaled correctly on different devices
    # see: https://www.w3schools.com/css/css_rwd_viewport.asp for more
    meta_tags=[
        {'name': 'viewport', 'content': 'width=device-width, initial-scale=1.0'}
    ],
    suppress_callback_exceptions=True
)

# Additional CSS for charts store
app.css.append_css(
    {'external_url': 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'}
)
app.css.config.serve_locally = False
server = app.server

app.layout = html.Div(
    dbc.Row(
        [
            dbc.Col(
                [
                    dbc.Label("Email", html_for="example-email-grid"),
                    dbc.Input(
                        type="email",
                        id="example-email-grid",
                        placeholder="Enter email",
                    ),
                ],
                width=6,
            ),
            dbc.Col(
                [
                    dbc.Label("Password", html_for="example-password-grid"),
                    dbc.Input(
                        type="password",
                        id="example-password-grid",
                        placeholder="Enter password",
                    ),
                ],
                width=6,
            ),
        ],
        className="g-3",
        # style={'display': 'block'}
    )
)

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

4 posts - 2 participants

Read full topic