CSS rule is clobbered by Panel/Bokeh's inline styles on HTML elements

I’m trying to apply some styles to my Panel app using panel.save("dashboard.html") and having trouble with the auto generated inline styles that Panel/Bokeh is adding.

I’ve created a CSS rule (attached using pn.extension(raw_css=[css])) that uses class-based selectors. In those selectors I’m trying to set position:sticky, however Panel/Bokeh has already applied position:absolute through the style attribute of the element, meaning that it takes precedent over my CSS rule.

Does anyone have any approaches for applying styles through CSS that are clobbered by Panel/Bokeh’s inline styles?

Hi, you can try to add !important on your new css value in order to override the panel/bokeh style.

.yourclass {
    position: sticky !important;

Oh yes, I forgot about that CSS last resort option. That did the trick, thanks!

I feel like this is a bit of a friction point for styling Panel apps, having to resort to using !important on an as-needed basis. But at least there’s a workaround.

1 Like

I do feel the pain of css as well @nedned. First of all the “bokeh” wrapping makes it hard to apply css frameworks like bootstrap. Secondly Bokeh, Panel and Jupyter already comes with a lot of css that might be prioritized.

Thats why I am trying to implement new widgets like Fast and Material based on Web Components. Web Components come with a built in styles that does not get changed by custom css so easily.