Dash styling issues

@dikshit wrote:

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')

])

Posts: 2

Participants: 1

Read full topic