Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
750 views
in Technique[技术] by (71.8m points)

python - How to Fix My Plotly Dash App Not Organizing Properly

I'm trying to organize my Plotly Dash dashboard into sections of columns, but I can't understand what I'm doing wrong here. I've included my components in separate dbc.Cols within one dbc.Row and specified the width of the column I'd like for them to take up, but everything is just stacked. Ideally, I'd have the cards in a column all by themselves on the left, then I would have the questions next to them on the right. Can someone please help me diagnose what I'm doing that's causing all my components to stack?

#Import packages
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State



app = dash.Dash()

#App Layout
app.layout = html.Div([
    dbc.Row(children=[
                dbc.Col(id="card_col",width = 6),
                dbc.Col(id="form", width=6, children=[
                    html.Div([
                        dbc.FormGroup(children=[
                            dbc.Label("Question 1"),
                            dbc.Col(
                                dcc.Input(type="text", id="q1", placeholder="Enter your info"),
                                width=6
                            )
                        ],row=True)
                    ]),
                    html.Br(),
                    html.Div(children=[
                        dbc.FormGroup(children=[
                            dbc.Label("Question 2?"),
                            dbc.Col(
                                dbc.Input(type="text",id="q2",placeholder="Enter your info"),
                                width=6
                            )
                        ],row=True)
                    ]),
                    html.Br(),
                    html.Div([
                        dbc.FormGroup(children=[
                            dbc.Label("Yes/No?"),
                            dbc.Col(
                                dbc.RadioItems(id="q3",options=[{"label": "Yes", "value": 1},
                                                                {"label": "No", "value": 2}
                                                               ]
                                              ),width=6
                            )
                        ],row=True)

                    ]),
                    html.Br(),
                    html.Div([
                        html.Button(id='submit-button',
                            n_clicks=0,
                            children='Submit Query',
                            style={'fontSize':24})

                    ])

                ]) #End of second column
                ]), #End of row,
    dbc.Row(
        html.Div([
            dcc.Graph(id='graph1')
        ])
    
    )
    

])


@app.callback(
    Output('card_col','children'),
    Input('submit-button','n_clicks'),
    State('q1','value'),
    State('q2','value'),
    State('q3','value'))
def update_cards(n_clicks,input1,input2,input3):
    
    card1 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input1}", className="card-title"),
            html.P(f"{input1} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])
        
    card2 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input2}", className="card-title"),
            html.P(f"{input2} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])
    
    card3 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input3}", className="card-title"),
            html.P(f"{input3} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])    
        
    return (card1, card2, card3)
    

if __name__ == "__main__":
    app.run_server()
    
    
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You haven't included the bootstrap styles:

Linking a stylesheet dash-bootstrap-components doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice. This means however that in order for the components to be styled properly, you must link to a stylesheet yourself.

In Python, each CDN link is available within the dbc.themes submodule and can be used when instantiating the app object.

https://dash-bootstrap-components.opensource.faculty.ai/docs/quickstart/


So instead of this:

app = dash.Dash()

do this:

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...