CODEWITHSUNDEEP
pythoncssplotly-dash
Kin_99
Kin_99

Reputation: 47

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

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

Upvotes: 0

Views: 3398

Answers (1)

coralvanda
coralvanda

Reputation: 6596

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

Upvotes: 1

Related Questions