Dash Formatting

Dash Python
1

Hi All ,

Im developing a dashboard and Im creating drop downs on the dashboard . Expected like below

image

But im getting like

2
2773×512 6.35 KB

How to format so that the drop down comes next to next coloumn wise. Also how to draw borders ?

Code that i ran

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
colors = {
‘background’: ‘#87D653’,
‘text’: ‘#ff0033’
}

app.layout =html.Div([
html.H3(“Settings”, style={‘textAlign’: “left” , ‘color’:“red”}),
html.Div(children=’’‘Geo Hierarchy’’’, style={‘textAlign’: “left” , ‘color’:“black”}),
html.Div(children=’’‘Region’’’, style={‘textAlign’: “left” , ‘color’:“purple”}),

        dcc.Dropdown(id="demo-dropdown",
                    options=[
                        {'label': 'Category', 'value': 'NYC'},
                        {'label': 'Category', 'value': 'MTL'},
                        {'label': 'Category', 'value': 'SF'}                            
                     ],
        style={'align-items:': "left","width": "30%"}
        ),

html.Div([
html.Div(children=’’‘Channel’’’, style={‘textAlign’: “left” , ‘color’:“purple”}),

        dcc.Dropdown(id="demo-dropdown1",
                    options=[
                        {'label': 'Category', 'value': 'NYC'},
                        {'label': 'Category', 'value': 'MTL'},
                        {'label': 'Category', 'value': 'SF'}                            
                     ],
        style={'textAlign': "left","width": "30%"}
        ),
        
html.Div([ 
html.Div(children='''Key Account''', style={'textAlign': "left" , 'color':"purple"}),
    
        dcc.Dropdown(id="demo-dropdown2",
                    options=[
                        {'label': 'Category', 'value': 'NYC'},
                        {'label': 'Category', 'value': 'MTL'},
                        {'label': 'Category', 'value': 'SF'}                            
                     ],
        style={'textAlign': "left","width": "30%"}
        ),
        
html.Div(children='''My Brand''', style={'textAlign': "center" , 'color':"black"}),

html.Div(children=’’‘Category’’’, style={‘textAlign’: “center” , ‘color’:“purple”}),

        dcc.Dropdown(id="demo-dropdown3",
                    options=[
                        {'label': 'Category', 'value': 'NYC'},
                        {'label': 'Category', 'value': 'MTL'},
                        {'label': 'Category', 'value': 'SF'}                            
                     ],
        style={'align-items:': "center","width": "30%"}
        ),

html.Div([
html.Div(children=’’‘Segment’’’, style={‘textAlign’: “center” , ‘color’:“purple”}),

        dcc.Dropdown(id="demo-dropdown4",
                    options=[
                        {'label': 'Category', 'value': 'NYC'},
                        {'label': 'Category', 'value': 'MTL'},
                        {'label': 'Category', 'value': 'SF'}                            
                     ],
        style={'textAlign': "center","width": "30%"}
        ),
        
html.Div([ 
html.Div(children='''Brand''', style={'textAlign': "center" , 'color':"purple"}),
    
        dcc.Dropdown(id="demo-dropdown5",
                    options=[
                        {'label': 'Category', 'value': 'NYC'},
                        {'label': 'Category', 'value': 'MTL'},
                        {'label': 'Category', 'value': 'SF'}                            
                     ],
        style={'textAlign': "center","width": "30%"}
        ),
html.Div([ 
html.Div(children='''SubBrand''', style={'textAlign': "center" , 'color':"purple"}),
    
        dcc.Dropdown(id="demo-dropdown6",
                    options=[
                        {'label': 'Category', 'value': 'NYC'},
                        {'label': 'Category', 'value': 'MTL'},
                        {'label': 'Category', 'value': 'SF'}                            
                     ],
        style={'textAlign': "center","width": "30%"}
        )
    ])    
        
])

])

])
])
])

if name == ‘main’:
app.run_server(debug=True)

2

Hi @aarush

First a tip to show and share code here: you will find a menu in the top of the box where you write the message:
image

Second: to show your dropdowns as you expected, you must wrap the first 3 dropdowns in a html.Div and the other 4 in an other html.Div and style the divs using this css style:

style={'display': 'inline-block'}

For styling your dropdowns you can use also the style property of the dropdown or directly use a css file to set all the dropdown together.

style={'border-left-style': 'solid', 'padding-left': 4 ,'border-left-color': 'black'}

or any css style you want CSS Tutorial

Also for the page layout you can use a different aproach using dash bootstrap components, you can see how to use it from @adamschroeder video here: Introduction to Dash Bootstrap - Styling your App - YouTube

1 Like