✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Components not aligning into Columns

Hi All,

Pretty new to Dash and I have a question. I’m working on a project, and there is a lot of white space on my page so I was trying to put everything into 2 separate columns on the page. Should be easy enough, but now that I finally got everything wrapped in the correct brackets (that was a nightmare lol), it’s still displaying as one big row. Is there something I’m missing here? Thanks!

app.layout = html.Div(
    dbc.Row([
    html.Div([
    dbc.Col([
        html.Div([
            daq.PowerButton(
            id='my-power-button',
            on=True,style={'padding-bottom':'5px'}
            ),
            html.Div(id='power-button-output',style={'text-align':"center",'padding-bottom':'5px'}),
            html.H1('The Florian Project',style={'text-align':"center"}),
            html.Div(id='movement_text',style={'text-align':"center"}),
            dcc.ConfirmDialog(
            id='confirm',
            message='No movement detected for FF1. Confirm?')
            ])]),
        dbc.Col([
        dcc.Graph(id='live-update-position',style={'padding-top':"5px"}),
        dcc.Interval(
            id='interval-component',
            interval=1*1000,
            n_intervals=0
            ),
        dcc.Interval(
            id='movement-interval',
            interval=30*1000,
            n_intervals=0
        )
        ])
        ],style={'margin':'auto','width':'60%'})])


)

based on your layout, it displays all components in one 1 column within the first row. what is your desired look?

It should be everything but the graph in 1 column and the graph in column 2. What I was trying to do up there is I created 1 row. Inside that row I created 2 columns. One column with a Div with all the text and stuff, the other column with the graph.