dbc.Col + Pattern matching callback not working as expected

Dash Python
1

So here’s a minimum example of my code and I’m not sure why the col components that I’m adding in a pattern matching callback aren’t working as I would expect? They’re not the right size and they’re not filling in the parent container? Any help would be much appreciated. The goal is for the items of the pattern matching callback to responsively fill in the space, which equates to setting them to size 6 width on xs + sm displays and 12 width on md displays and upwards. Thanks!

from dash import html, dcc, Input, Output, State, Dash
import dash_bootstrap_components as dbc

style = dbc.themes.BOOTSTRAP

app = Dash(__name__, external_stylesheets=[style])

# Placeholder application layout
app.layout = dbc.Container([
    dbc.Row(
        [
            dbc.Col(
                [
                    dbc.Button(
                        "Placeholder Button", className="", id="button", n_clicks=0,
                    ),
                    dbc.Row(html.Div(id="test_id", children=[])),
                ],
                width=6
            ),
        ],
    ),
], fluid=True,)

@app.callback(
    Output("test_id", "children"),
    Input("button", "n_clicks"),
    State("test_id", "children"),
    prevent_initial_call=True,
    # State("cov_factors_store", "data"),
)
def display_dropdowns(n_clicks, container):
    # Should just have a callback that deals with the store component, and then everything else follows from that.
    new_dropdown = dbc.Col(
        dcc.Dropdown(
            options=[
                {"label": "NYC", "value": "New York City"},
                {"label": "MTL", "value": "Montreal"},
                {"label": "SF", "value": "San Francisco"},
                {"label": "LA", "value": "Los Angeles"},
                {"label": "TOKYO", "value": "Tokyo"},
            ],
            id={"type": "factor_dropdown", "index": n_clicks},
        ),
        className="mb-2 px-0",
        xs=6,
        md=12,
    )
    container.append(new_dropdown)
    return container

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

Hi @dash-beginner
Try to take the row with the html.div out of the first dbc.Row, like below. Or change width=6 to width=12 of the Col inside the Layout of the original code you had.

app.layout = dbc.Container([
    dbc.Row(
        [
            dbc.Col(
                [
                    dbc.Button(
                        "Placeholder Button", className="", id="button", n_clicks=0,
                    ),
                ],
                width=6
            ),
        ],
    ),
    dbc.Row(html.Div(id="test_id", children=[])),

], fluid=True,)

Is that what you’re looking for?

3

I would ideally like the row that I create to be housed in the first column, but even when I copied and pasted what you just wrote, it outputs this for me:

image
image2382×1596 67.7 KB

Is this what yours looked like as well when you made the edit you suggested by chance?

4

no actually. Mine has 12 columns across for large screen and 6 columns for small screen

5

I found the problem - it didn’t like when the columns were the direct child of a div instead of the dbc.Row. Removing the Div and changing the id of the row to be “test_id” got me back to my desired behavior. Thanks for the help in trying to debug things :slight_smile:

1 Like