Setting style causes layout issue

Dash Python
1

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)

working
working1286×96 5.12 KB

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

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)
2

That style={'display': 'block} statement is overriding the row class built into bootstrap.

Before:

element.style {
display: block;
}

.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
/* display: flex; */
flex-wrap: wrap;

After:

element.style {
    /* display: block; */
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;

Is there a particular reason you are attempting to add that css style in?

3

Thanks @tphil10 for the response! I am adding a row to my layout that will only be visible to certain users, and made the assumption setting style={'display': 'none'} (or 'block') would be suffient. SInce it works w/o issues with other dash-bootstrap components, I didn’t think to look at the .row CSS.

I appreciate your feedback and will look at another way to implement my new row!

4

@flyingcujo Bootstrap does have visibility helper classes you can use.

The only caveat that using them does keep the element in the DOM as opposed to removing it completely. I might recommend moving this visibility CSS class down to the div itself instead of the row.

5

thanks! I think this could help !