Dash and Plotly - using CSS to style elements of the same class name

Question

I would like to use a css stylesheet to keep most of the styling for my dash app in a separate file, but the problem is that a lot of my components use the name classname: className='col-2' or className='col-3'. My understanding is that using className='col-2' specifies the number of columns and helps with layout, but I want to create a boarder next to some divs and it's impossible using classnames. Is there another way to do this?

Below are two columns from my code, they both use className='col-3'. Problem is that when I create a stylesheet with background color and border, the same style is applied to my header which also has a component with col-3.

/////STYLESHEET///////

.col-3{
    border: 2px solid darkgray;
    background-color:#FFFFFF
}

//////DASH-APP/////// fragment of code

 row1_col1 = html.Div(children=[
                                 #DIV 6 - row
                                 html.Div(children=[
                                 html.Br(),
                                 #DIV 2
                                 html.Div(children=[
                                     html.H4(children="Select By University",
                                     style={'textAlign':'center','height': '25px','fontSize': 18}),
                                     # DIV 3 selection
                                     html.Div(children=dd1_select_univ,
                                     style={'padding-left':'3%'})
                                     ], 
                                 #className='row', 
                                 style={'color':font_color, 'fontSize': 12},className='col-6'),
                                 #DIV 3
                                 html.Div(children=[
                                     html.H4(children="Search by Publication",
                                     style={'textAlign':'center','height': '25px','fontSize': 18}),
                                     # DIV 5- selection
                                     html.Div(children=inp1_public_title,
                                     style={'padding-left':'1%'}),
                                     ], 
                                 style={ 'color':font_color, 'fontSize': 12},className='col-6')],
                                 className='row'),
                                

                                 html.Div(children=[
                                 html.Br(),
                                 html.Div(children=[html.H4("Year Range",
                                 style={'textAlign':'center','fontSize': 14,'height':'20px'}),
                                 rs1_year], 
                                 className='col-12', 
                                 )],
                                 className='row')
                                #  ], className='row',style={'margin-left':12})
                                 
                                 
                                 ],className='col-6',
                                 style={"background":background_color,'width':'45%','height':'40%','borderWidth':'3px','borderColor':'gray','margin-left':'1%'} )

                           

row1_col2 = html.Div(children=[
                                   
                                   html.Div(children=[
                                       html.H4("The Most Popular Keyword in the Academic World",
                                       style={'textAlign':'center','padding-top':'3%','fontSize': 20}),
                                       html.Div(rb1_popular_keyword,
                                       style={'height':'20%'}),
                                       html.H5(id='val-popular-keyword', style={'padding-top':'1%',"background":'yellow'}),
                                       ]
                                       )
                                ] , className='col-3',style={"background":background_color,'width':'27%','margin-left':'0.5%'})
row1_col3 = html.Div(children=[
                                   
                                   html.Div(children=[
                                        html.H4("Number of Publications Referencing the Most Popular Keyword",
                                        style={'textAlign':'center','padding-top':'3%','fontSize': 20,}),
                                        html.Div(
                                        style={"background":'red'}),
                                        html.H5(id='val-pub_cnt', style={'padding-top':'2%','fontSize': 24})  
                                        ]
                                        ) 
                                ] , className='col-3',style={"background":background_color,'width':'25%','color':font_color,'margin-left':'0.5%'})

coralvanda · Accepted Answer · 2022-04-28 00:14:49Z

1

So you want to have some styles associated with one class name, and different styles associated with another? You can do this. Define the styles for each class name in your CSS file, and then give class names to your components as needed. Example:

html.Div(
    id='whatever',
    children='Some text',
    className='col-3 another-class-name yet-a-third-class-name'
)

answered Apr 28, 2022 at 0:14

coralvanda

6,6562 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dash and Plotly - using CSS to style elements of the same class name

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related