How to customize dash accordian button?

Dash Python
1

How can I customize the accordion button in Dash, specifically its size, color, and the space between the accordion and the chevron icon?

2

hi @Ananthzeke
could you please provide more info or some code.

3

Hi @adamschroeder
I have used an accordion component to organize feedback messages, but the issue with the accordion component is that it occupies the entire space within the message, which can make it appear unattractive. Below is my code for creating the accordion component. I have attempted to adjust the styling, but it doesn’t seem to have any effect.

def create_accordion(accordion_id,button,button_name='submit',content='Here are the examples'):
    accordion=html.Div(
        [
            dbc.Accordion(
        [
            dbc.AccordionItem(
        [content,
            dbc.Button(f"{button_name}", id=f"{accordion_id}-{button_name}", className="ms-auto", n_clicks=0)
        ],
        title='Give Feedback'
        )
        ]
            )
        ],style={"overflow": "scroll","max-height": "300px"}
    )
    return accordion

image
image1549Ă—189 11.8 KB

what i actually want is

image
image1549Ă—189 10.9 KB

The content within the “Give Feedback” section also needs to fill the entire chat, like this.

image
image1570Ă—394 28.1 KB

4

You could use the dbc Layout components to put your items in a grid. With the Layout components Container, Row, and Col you can set the width on the Col component. The width can be set to True (default full width of parent), 1-12 (fraction of parent) or “auto” (width of contents).

Some components take on the width of the parent, which I believe is the behavior of the accordion. In your case the html.Div() is the parent. You should be able to set the width of the accordion by setting the width of the html.Div().

Here are the dbc docs for Layout components.

2 Likes