Black Lives Matter. Please consider donating to Black Girls Code today.

Dash styling issues

I am creating an app that will allow the user to filter his requirements and then look at the figure. I am able to get the desired graph and also all the filters. However, I am facing issues in styling.
Even after appending the css in to my app and mentioning the className, i am not able to see the changes in my app. Kindly look into my code and let me know what I am doing wrong. Thanks in advance!

app.layout = html.Div([
html.Div([

            html.P([
                html.Label('Choose a Site',style = {'fontSize':18}),   
                dcc.Dropdown(
                    id ='Site_input', 
                    options = [{'label':i, 'value' : i} for i in data['Site'].unique()],
                    value = 'RD MINES',
                    placeholder='Select a Site'
                    )

            ], className = "three columns"),
    
            html.P([
                html.Label('Choose a Equipent id',style = {'fontSize':18}),
                dcc.Dropdown(
                    id = 'eqid_input'
                    )

            ],className = 'three columns'),

            html.P([

                html.Label('Choose a Equipent type', style = {'fontSize':18}),
                dcc.Dropdown(
                    id = 'etype_input')
            ],className = 'three columns')
    
], className = "row"),


html.Div([
       dcc.Tabs(id="tabs", children=[

            dcc.Tab(label='Equipment Health',
                    children =[
                        html.Div([
                            html.Label(id = 'health')

                    ]),
                        html.P([
                            html.Label("Recent Date Data:"),
                            html.Div([
                                dash_table.DataTable(
                                    id='table')



                            ])
                        ])

                    ]) ,

           
           
            dcc.Tab(label='Wear Metals',

            children=[                
                    html.Div(dcc.Checklist(id = 'metal_inp',
                            options=[
                                {'label': 'Iron', 'value': 'Fe'},
                                {'label': 'Chromium', 'value': 'Cr'},
                                {'label': 'Tin', 'value': 'Sn'},
                                {'label': 'Aluminium', 'value': 'Al'},
                                {'label': 'Nickel', 'value': 'Ni'},
                                {'label': 'Manganese', 'value': 'Mn'},
                                {'label': 'Copper', 'value': 'Cu'},
                                {'label': 'Lead', 'value': 'Pb'},
                                {'label': 'Silver', 'value': 'Ag'},
                                {'label': 'Vanadium', 'value': 'V'},
                                {'label': 'Titanium', 'value': 'Ti'}
                                ],
                                value=['Fe', 'Cr'])),
                    dcc.Graph(id = 'metal_graph'

                             )
                            ]),

            dcc.Tab(label='Contamination',
                children=[                
                    html.Div(dcc.Checklist(id = 'cont_inp',
                            options=[
                                {'label': 'Water', 'value': 'Water Content'},
                                {'label': 'Particle', 'value': 'Partical Counter'},
                                {'label': 'Silica', 'value': 'Si'},
                                {'label': 'Sodium', 'value': 'Na'},
                                {'label': 'Potassium', 'value': 'K'}
                                ],
                                value=['Si','Na'])),
                    dcc.Graph(id = 'cont_graph'

                             )
                            ]),

            dcc.Tab(label='Oil Condition',
                    children =[
                   html.Div(dcc.Checklist(id = 'oilcond_inp',
                            options=[
                                {'label': 'Viscosity at 40C', 'value': 'Viscosity 40'},
                                {'label': 'Viscosity AT 100C', 'value': 'Viscosity 100'},
                                {'label': 'TAN', 'value': 'TAN'}
                                ],
                                value=['TAN','Viscosity 40'])),
                    dcc.Graph(id = 'oilcond_graph'

                             )

               ]
               ),
            dcc.Tab(label='Additives',
                              children = [
                   html.Div(dcc.Checklist(id = 'add_inp',
                            options=[
                                {'label': 'Calcium', 'value': 'Ca'},
                                {'label': 'Magnesium', 'value': 'Mg'},
                                {'label': 'Cadmium', 'value': 'Cd'},
                                {'label': 'Boron', 'value': 'B'},
                                {'label': 'Zinc', 'value': 'Zn'},
                                {'label': 'Phosphorous', 'value': 'P'},
                                {'label': 'Barium', 'value': 'Ba'},
                                {'label': 'Molybdenum', 'value': 'Mo'}                                
                                ],
                                value=['Ca','Mg'] )),
                    dcc.Graph(id = 'add_graph'

                             )

               ]
               ),
               dcc.Tab(label='All Parameters',                       
                              children = [
                       html.Label("Wear metal:"),
                       dcc.Dropdown(id = 'allinp1',
                                options=[
                                    {'label': 'Iron', 'value': 'Fe'},
                                    {'label': 'Chromium', 'value': 'Cr'},
                                    {'label': 'Tin', 'value': 'Sn'},
                                    {'label': 'Aluminium', 'value': 'Al'},
                                    {'label': 'Nickel', 'value': 'Ni'},
                                    {'label': 'Manganese', 'value': 'Mn'},
                                    {'label': 'Copper', 'value': 'Cu'},
                                    {'label': 'Lead', 'value': 'Pb'},
                                    {'label': 'Silver', 'value': 'Ag'},
                                    {'label': 'Vanadium', 'value': 'V'},
                                    {'label': 'Titanium', 'value': 'Ti'}], multi =True, value = ['Fe']),

                       html.Label("Contamination:"),
                       dcc.Dropdown(id = 'allinp2',
                                options=[
                                {'label': 'Water', 'value': 'Water Content'},
                                {'label': 'Particle', 'value': 'Partical Counter'},
                                {'label': 'Silica', 'value': 'Si'},
                                {'label': 'Sodium', 'value': 'Na'},
                                {'label': 'Potassium', 'value': 'K'}], multi =True, value = ['K']),

                       html.Label("Oil Condition:"),
                        dcc.Dropdown(id = 'allinp3',
                                options=[              
                                {'label': 'Viscosity at 40C', 'value': 'Viscosity 40'},
                                {'label': 'Viscosity AT 100C', 'value': 'Viscosity 100'},
                                {'label': 'TAN', 'value': 'TAN'}], multi = True, value = ['Viscosity 100']),


                       html.Label("Additives:"),
                         dcc.Dropdown(id = 'allinp4',
                                options=[            
                                {'label': 'Calcium', 'value': 'Ca'},
                                {'label': 'Magnesium', 'value': 'Mg'},
                                {'label': 'Cadmium', 'value': 'Cd'},
                                {'label': 'Boron', 'value': 'B'},
                                {'label': 'Zinc', 'value': 'Zn'},
                                {'label': 'Phosphorous', 'value': 'P'},
                                {'label': 'Barium', 'value': 'Ba'},
                                {'label': 'Molybdenum', 'value': 'Mo'}                                
                                ],multi = True,                                
                                value=['Ca','Mg'] ),
                    dcc.Graph(id = 'allgraph'

                             )

               ]
               )

]
)
], className = 'row')

])

i hagve appended css too.

app.css.append_css({‘external_url’: ‘https://codepen.io/chriddyp/pen/dZVMbK.css’})

Are you able to post the entire app.py file to help with feedback?

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import numpy as np
import pandas as pd
import plotly.graph_objects as go
data = pd.read_csv(‘final_data_copy.csv’,low_memory=False)

graph_colr = {‘Fe’: ‘blue’,
‘Cr’: ‘green’,
‘Sn’: ‘red’,
‘Al’: ‘yellow’,
‘Ni’: ‘purple’,
‘Mn’: ‘grey’,
‘Cu’: ‘orange’,
‘Pb’: ‘magenta’,
‘Ag’: ‘brown’,
‘V’ : ‘violet’,
‘Ti’: ‘black’
}

app = dash.Dash(name)

app.css.append_css({‘external_url’: ‘https://codepen.io/chriddyp/pen/dZVMbK.css’})

app.layout = html.Div([
html.Div([

            html.P([
                html.Label('Choose a Site',style = {'fontSize':18}),   
                dcc.Dropdown(
                    id ='Site_input', 
                    options = [{'label':i, 'value' : i} for i in data['Site'].unique()],
                    value = 'RD MINES',
                    placeholder='Select a Site'
                    )

            ], className = "three columns"),
    
            html.P([
                html.Label('Choose a Equipent id',style = {'fontSize':18}),
                dcc.Dropdown(
                    id = 'eqid_input'
                    )

            ],className = 'three columns'),

            html.P([

                html.Label('Choose a Equipent type', style = {'fontSize':18}),
                dcc.Dropdown(
                    id = 'etype_input')
            ],className = 'three columns')
    
], className = "row"),


html.Div([
       dcc.Tabs(id="tabs", children=[

            dcc.Tab(label='Equipment Condition',
                    children =[
                        html.Div([
                            html.P('The Overall Condition of the Machine Is:-'),
                            html.H1(id = 'health',style={'color': 'green'})

                    ]),
                        html.P([
                            html.Label("Recent Date Data:"),
                            html.Div([
                                dash_table.DataTable(
                                    id='table')



                            ])
                        ])

                    ]) ,

           
           
            dcc.Tab(label='Wear Metals',

            children=[                
                    html.Div(dcc.Checklist(id = 'metal_inp',
                            options=[
                                {'label': 'Iron', 'value': 'Fe'},
                                {'label': 'Chromium', 'value': 'Cr'},
                                {'label': 'Tin', 'value': 'Sn'},
                                {'label': 'Aluminium', 'value': 'Al'},
                                {'label': 'Nickel', 'value': 'Ni'},
                                {'label': 'Manganese', 'value': 'Mn'},
                                {'label': 'Copper', 'value': 'Cu'},
                                {'label': 'Lead', 'value': 'Pb'},
                                {'label': 'Silver', 'value': 'Ag'},
                                {'label': 'Vanadium', 'value': 'V'},
                                {'label': 'Titanium', 'value': 'Ti'}
                                ],
                                value=['Fe', 'Cr'])),
                    dcc.Graph(id = 'metal_graph'

                             )
                            ]),

            dcc.Tab(label='Contamination',
                children=[                
                    html.Div(dcc.Checklist(id = 'cont_inp',
                            options=[
                                {'label': 'Water', 'value': 'Water Content'},
                                {'label': 'Particle', 'value': 'Partical Counter'},
                                {'label': 'Silica', 'value': 'Si'},
                                {'label': 'Sodium', 'value': 'Na'},
                                {'label': 'Potassium', 'value': 'K'}
                                ],
                                value=['Si','Na'])),
                    dcc.Graph(id = 'cont_graph'

                             )
                            ]),

            dcc.Tab(label='Oil Condition',
                    children =[
                   html.Div(dcc.Checklist(id = 'oilcond_inp',
                            options=[
                                {'label': 'Viscosity at 40C', 'value': 'Viscosity 40'},
                                {'label': 'Viscosity AT 100C', 'value': 'Viscosity 100'},
                                {'label': 'TAN', 'value': 'TAN'}
                                ],
                                value=['TAN','Viscosity 40'])),
                    dcc.Graph(id = 'oilcond_graph'

                             )

               ]
               ),
            dcc.Tab(label='Additives',
                              children = [
                   html.Div(dcc.Checklist(id = 'add_inp',
                            options=[
                                {'label': 'Calcium', 'value': 'Ca'},
                                {'label': 'Magnesium', 'value': 'Mg'},
                                {'label': 'Cadmium', 'value': 'Cd'},
                                {'label': 'Boron', 'value': 'B'},
                                {'label': 'Zinc', 'value': 'Zn'},
                                {'label': 'Phosphorous', 'value': 'P'},
                                {'label': 'Barium', 'value': 'Ba'},
                                {'label': 'Molybdenum', 'value': 'Mo'}                                
                                ],
                                value=['Ca','Mg'] )),
                    dcc.Graph(id = 'add_graph'

                             )

               ]
               ),
               dcc.Tab(label='All Parameters',                       
                              children = [
                       html.Label("Wear metal:"),
                       dcc.Dropdown(id = 'allinp1',
                                options=[
                                    {'label': 'Iron', 'value': 'Fe'},
                                    {'label': 'Chromium', 'value': 'Cr'},
                                    {'label': 'Tin', 'value': 'Sn'},
                                    {'label': 'Aluminium', 'value': 'Al'},
                                    {'label': 'Nickel', 'value': 'Ni'},
                                    {'label': 'Manganese', 'value': 'Mn'},
                                    {'label': 'Copper', 'value': 'Cu'},
                                    {'label': 'Lead', 'value': 'Pb'},
                                    {'label': 'Silver', 'value': 'Ag'},
                                    {'label': 'Vanadium', 'value': 'V'},
                                    {'label': 'Titanium', 'value': 'Ti'}], multi =True, value = ['Fe']),

                       html.Label("Contamination:"),
                       dcc.Dropdown(id = 'allinp2',
                                options=[
                                {'label': 'Water', 'value': 'Water Content'},
                                {'label': 'Particle', 'value': 'Partical Counter'},
                                {'label': 'Silica', 'value': 'Si'},
                                {'label': 'Sodium', 'value': 'Na'},
                                {'label': 'Potassium', 'value': 'K'}], multi =True, value = ['K']),

                       html.Label("Oil Condition:"),
                        dcc.Dropdown(id = 'allinp3',
                                options=[              
                                {'label': 'Viscosity at 40C', 'value': 'Viscosity 40'},
                                {'label': 'Viscosity AT 100C', 'value': 'Viscosity 100'},
                                {'label': 'TAN', 'value': 'TAN'}], multi = True, value = ['Viscosity 100']),


                       html.Label("Additives:"),
                         dcc.Dropdown(id = 'allinp4',
                                options=[            
                                {'label': 'Calcium', 'value': 'Ca'},
                                {'label': 'Magnesium', 'value': 'Mg'},
                                {'label': 'Cadmium', 'value': 'Cd'},
                                {'label': 'Boron', 'value': 'B'},
                                {'label': 'Zinc', 'value': 'Zn'},
                                {'label': 'Phosphorous', 'value': 'P'},
                                {'label': 'Barium', 'value': 'Ba'},
                                {'label': 'Molybdenum', 'value': 'Mo'}                                
                                ],multi = True,                                
                                value=['Ca','Mg'] ),
                    dcc.Graph(id = 'allgraph'

                             )

               ]
               )

]
)
], className = 'row')

])

@app.callback(
Output(“eqid_input”, “options”),
[ Input(“Site_input”, “value”) ]
)
def update_site(s):
data1 = data[data[‘Site’] == s]
eqt = [{‘label’:i, ‘value’ : i} for i in data1[‘EQ ID’].value_counts().index]
return eqt

@app.callback(
Output(‘etype_input’,‘options’),
[Input(‘eqid_input’,‘value’),
Input(“Site_input”, “value”)]
)
def update_eqid(eqid,site):
data1 = data[data[‘Site’] == site]
data2 = data1[data1[‘EQ ID’] == eqid]
return [{‘label’: i, ‘value’ : i} for i in data2[‘Equipment Type’].value_counts().index]

@app.callback(
Output(‘table’,‘columns’),
[Input(‘eqid_input’,‘value’),
Input(“Site_input”, “value”),
Input(“etype_input”, “value”)]
)
def get_table1(eqid,site,t):
data1 = data[data[‘Site’] == site]
data2 = data1[data1[‘EQ ID’] == eqid]
data3 = data2[data2[‘Equipment Type’] == t]

df = data3[['Sample Receive Date', 'Viscosity 40', 'Viscosity 100', 'TAN','Water Content', 'Partical Counter', 'S','Cu', 'Ca', 'K', 'Na','Zn', 'Cd', 'Cr', 'Mg', 'Fe', 'Si', 'Al', 'B', 'Ti', 'V', 'Ni', 'Mn','Mo', 
         'Sn', 'P', 'Pb', 'Ba', 'Ag']]
df = df[df['Sample Receive Date']==df['Sample Receive Date'].iloc[-1]]
columns=[{"name": i, "id": i} for i in df.columns]
return columns

@app.callback(
Output(‘table’,‘data’),
[Input(‘eqid_input’,‘value’),
Input(“Site_input”, “value”),
Input(“etype_input”, “value”)]
)
def get_table2(eqid,site,t):
data1 = data[data[‘Site’] == site]
data2 = data1[data1[‘EQ ID’] == eqid]
data3 = data2[data2[‘Equipment Type’] == t]

df = data3[['Sample Receive Date', 'Viscosity 40', 'Viscosity 100', 'TAN','Water Content', 'Partical Counter', 'S','Cu', 'Ca', 'K', 'Na','Zn', 'Cd', 'Cr', 'Mg', 'Fe', 'Si', 'Al', 'B', 'Ti', 'V', 'Ni', 'Mn','Mo', 
         'Sn', 'P', 'Pb', 'Ba', 'Ag']]
df = df[df['Sample Receive Date']==df['Sample Receive Date'].iloc[-1]]
return df.to_dict('records')

@app.callback(
Output(‘metal_graph’, ‘figure’),
[Input(‘metal_inp’,‘value’),
Input(‘eqid_input’,‘value’),
Input(“Site_input”, “value”),
Input(“etype_input”, “value”)]
)
def update_graph1(m,i,s,t):
data1 = data[data[‘Site’] == s]
data2 = data1[data1[‘EQ ID’] == i]
data3 = data2[data2[‘Equipment Type’] == t]
data3.sort_values(by = ‘Sample Receive Date’, ascending = False)
#m = list(m)
#data3[‘Felimit’]=45
count = len(m)
i = 0
date = data3[‘Sample Receive Date’].iloc[-1]
fig = go.Figure()
while i < count:
fig.add_trace(go.Scatter(x=data3[‘Sample Receive Date’], y=data3[m[i]], mode=‘lines+markers’,line = {‘color’ : graph_colr[m[i]]},name = m[i]))
i= i+1

if 'Fe' in m:
    data3['Fe_limit'] = 100
    fig.add_trace(go.Scatter(x=data3['Sample Receive Date'], y=data3['Fe_limit'],
                             mode='lines', line={'dash': 'dash', 'color': graph_colr['Fe']}, name = 'Fe limit'))
    #fig.add_annotation(go.layout.Annotation(x=date,y=100,text="Fe limit"))
    #fig.update_layout(annotations=[go.layout.Annotation(x='14/09/2019',y=100, xref="x",yref="y",text="Fe limit",showarrow=True,
                                                        #arrowhead=7,  ax=0, ay=-40)])

if ('Sn' in m) or ('Al' in m) or ('Ni' in m):
    data3['Snlimit'] = 50
    fig.add_trace(go.Scatter(x=data3['Sample Receive Date'], y=data3['Snlimit'],
                             mode='lines', line={'dash': 'dash', 'color': 'red'}, name = 'Sn/Al/Ni limit'))
if ('Cu' in m) or ('Pb' in m):
    data3['Cu_limit'] = 70
    fig.add_trace(go.Scatter(x=data3['Sample Receive Date'], y=data3['Cu_limit'],
                             mode='lines', line={'dash': 'dash', 'color': 'magenta'}, name = 'Cu/Pb limit'))
    
if 'Cr' in m:
    data3['Cr_limit'] = 25
    fig.add_trace(go.Scatter(x=data3['Sample Receive Date'], y=data3['Cr_limit'],
                             mode='lines',line={'dash': 'dash', 'color': 'green'}, name = 'Cr limit'))
    #fig.add_annotation(go.layout.Annotation(x=data3['Sample Receive Date'].iloc[-1],y=25,text="Cr limit"))

fig.update_layout(title_text='Wear metal analysis---Oil Grade: ' + data3['Grade of Oil'].max(), xaxis_rangeslider_visible=True,height = 700, width = 1600)

return fig

@app.callback(
Output(‘cont_graph’, ‘figure’),
[Input(‘cont_inp’,‘value’),
Input(‘eqid_input’,‘value’),
Input(“Site_input”, “value”),
Input(“etype_input”, “value”)]
)
def update_graph2(c,i,s,t):
data1 = data[data[‘Site’] == s]
data2 = data1[data1[‘EQ ID’] == i]
data3 = data2[data2[‘Equipment Type’] == t]
count = len©
i = 0

fig1 = go.Figure()
while i < count:    
    fig1.add_trace(go.Scatter(x=data3['Sample Receive Date'], y=data3[c[i]], mode='lines+markers', name = c[i]))
    i= i+1    
    
if ('Si' in c) or ('K' in c) or ('Na' in c):
    data3['Silimit'] = 50
    fig1.add_trace(go.Scatter(x=data3['Sample Receive Date'], y=data3['Silimit'],
                             mode='lines', line={'dash': 'dash', 'color': 'black'}, name = 'Si/K/Na limit'))
fig1.update_layout(title_text='Contamination analysis---Oil Grade: ' + data3['Grade of Oil'].max(),
                   xaxis_rangeslider_visible=True,height =  700, width = 1600)

return fig1

@app.callback(
Output(‘health’,‘children’),
[Input(‘eqid_input’,‘value’),
Input(“Site_input”, “value”),
Input(“etype_input”, “value”)]
)

def overallhealth(i,s,t):
data1 = data[data[‘Site’] == s]
data2 = data1[data1[‘EQ ID’] == i]
data3 = data2[data2[‘Equipment Type’] == t]
df = data3[data3[‘Sample Receive Date’]==data3[‘Sample Receive Date’].iloc[-1]]
return(“NORMAL”)

@app.callback(
Output(‘oilcond_graph’,‘figure’),
[Input(‘oilcond_inp’,‘value’),
Input(‘eqid_input’,‘value’),
Input(“Site_input”, “value”),
Input(“etype_input”, “value”)]
)
def update_graph3(o,i,s,t):
data1 = data[data[‘Site’] == s]
data2 = data1[data1[‘EQ ID’] == i]
data3 = data2[data2[‘Equipment Type’] == t]
count = len(o)
i = 0
fig2 = go.Figure()
while i < count:
fig2.add_trace(go.Scatter(x=data3[‘Sample Receive Date’], y=data3[o[i]], mode=‘lines+markers’, name = o[i]))
i= i+1
fig2.update_layout(title_text='Oil condition analysis—Oil Grade: ’ + data3[‘Grade of Oil’].max(), xaxis_rangeslider_visible=True,height = 700, width = 1600)

return fig2

@app.callback(
Output(‘add_graph’, ‘figure’),
[Input(‘add_inp’,‘value’),
Input(‘eqid_input’,‘value’),
Input(“Site_input”, “value”),
Input(“etype_input”, “value”)]
)
def update_graph4(a,i,s,t):
data1 = data[data[‘Site’] == s]
data2 = data1[data1[‘EQ ID’] == i]
data3 = data2[data2[‘Equipment Type’] == t]
count = len(a)
i = 0
fig3 = go.Figure()
while i < count:
fig3.add_trace(go.Scatter(x=data3[‘Sample Receive Date’], y=data3[a[i]], mode=‘lines+markers’, name = a[i]))
i= i+1
fig3.update_layout(title_text='Additive analysis—Oil Grade: ’ + data3[‘Grade of Oil’].max(), xaxis_rangeslider_visible=True,height = 700, width = 1600)

return fig3

@app.callback(
Output(‘allgraph’, ‘figure’),
[Input(‘allinp1’,‘value’),
Input(‘allinp2’,‘value’),
Input(‘allinp3’,‘value’),
Input(‘allinp4’,‘value’),
Input(‘eqid_input’,‘value’),
Input(“Site_input”, “value”),
Input(“etype_input”, “value”)]
)
def update_graph5(a,b,d,e,i,s,t):
data1 = data[data[‘Site’] == s]
data2 = data1[data1[‘EQ ID’] == i]
data3 = data2[data2[‘Equipment Type’] == t]
my = [*a,*b,*d,*e]
count = len(my)
i = 0
trace =
#fi = go.Figure()
while i < count:
trace.append(go.Scatter(x=data3[‘Sample Receive Date’], y=data3[my[i]], mode=‘lines+markers’, name = my[i]))
#fi.add_trace(go.Scatter(x=data3[‘Sample Receive Date’], y=data3[my[i]], mode=‘lines+markers’, name = my[i]))
i= i+1
fi = dict(data = trace)
return fi

> Blockquote