CODEWITHSUNDEEP
pythoncssplotlyplotly-dashdash-bootstrap-components
sarang
sarang

Reputation: 13

Styling Accordion tab dash bootstrap component

I would like to change the tab colour and alignment to centralise it. Thus far I've been using

style = {'textAlign': 'center'} and displace = flex option as well but that skews the content alignment.

Anyone knows how to use CSS to overwrite the title(item 1 , item 2 and item 3 in this case) in the tab only


import dash_bootstrap_components as dbc
from dash import html

accordion = html.Div(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    html.P("This is the content of the first section"),
                    dbc.Button("Click here"),
                ],
                title="Item 1",
            ),
            dbc.AccordionItem(
                [
                    html.P("This is the content of the second section"),
                    dbc.Button("Don't click me!", color="danger"),
                ],
                title="Item 2",
            ),
            dbc.AccordionItem(
                "This is the content of the third section",
                title="Item 3",
            ),
        ],
    )
)

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/accordion/

Upvotes: 1

Views: 2821

Answers (1)

Daniel Al Mouiee
Daniel Al Mouiee

Reputation: 1200

You need to change the styling for .accordion-button to this:

.accordion-button {
    text-align: center;
    display: block;
}

Place this in a .css file under the assets which should be placed on the same directory level as your application file.

Upvotes: 1

Related Questions