CSS stylesheets not working for Accordion

Panel
1

I am trying to style the header of cards that are rendered by pn.Accordion, when I try to apply styles to a specific class, it does not work, minimal reproducer below, ACCORDION_STYLESHEET1 works but ACCORDION_STYLESHEET2 doesn’ t work:

import panel as pn
pn.extension()


DATA = {
    'Category 1': ['a', 'b'],
    'Category 2': ['c', 'd']
}

# This CSS is respected
ACCORDION_STYLESHEET1 = """
.bk-panel-models-layout-Card.accordion{
    width: 800px !important
}
"""
# This CSS is not!
ACCORDION_STYLESHEET2 = """
.bk-panel-models-markup-HTML.card-title{
    margin: 0px !important;
}
"""

acc = pn.Accordion(*[(k, pn.Column(*[pn.pane.Markdown(x) for x in v])) for k,v in DATA.items()], stylesheets=[ACCORDION_STYLESHEET1, ACCORDION_STYLESHEET2] )
pn.serve(acc)

I am not able to understand the reason for this. I selected the classes by inspecting the specific element that I want to target. How can I make this to work?

2

The problem is that the stylesheets get appended to the accordion element. It affects its children but not any sub children.

Workaround

You can apply the css to every Panel/ Bokeh element via raw_css. It slows down your app - but probably not noticable.

import panel as pn
CSS = """
.bk-panel-models-markup-HTML.card-title {
    margin: 0px;
    background: yellow;
}
"""
pn.extension(raw_css=[CSS])


DATA = {"Category 1": ["a", "b"], "Category 2": ["c", "d"]}

# This CSS is respected
acc = pn.Accordion(
    *[(k, pn.Column(*[pn.pane.Markdown(x) for x in v])) for k, v in DATA.items()],
    width=800
)
acc.servable()

image
image1393×796 60.3 KB