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

**URL:** <https://discourse.holoviz.org/t/css-rule-is-clobbered-by-panel-bokehs-inline-styles-on-html-elements/1185>\
**Category:** Panel\
**Created:** [September 10, 2020, 7:58am UTC](https://discourse.holoviz.org/t/css-rule-is-clobbered-by-panel-bokehs-inline-styles-on-html-elements/1185 "2020-09-10T07:58:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nedned](https://discourse.holoviz.org/letter_avatar_proxy/v4/letter/n/59ef9b/32.png) [@nedned](https://discourse.holoviz.org/u/nedned)\
**Post date:** [September 10, 2020, 7:58am UTC](https://discourse.holoviz.org/t/css-rule-is-clobbered-by-panel-bokehs-inline-styles-on-html-elements/1185/1 "2020-09-10T07:58:28Z")

</div>

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?

 ![Screenshot from 2020-09-10 17-51-36](https://discourse.holoviz.org/uploads/default/original/2X/a/adb0b1974f6f8cf44884ebbc6b7dfd795d9a04ff.png)

---

<div class="post-metadata">

**Author:** ![AurelienSciarra](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/aureliensciarra/32/857_2.png) [@AurelienSciarra](https://discourse.holoviz.org/u/AurelienSciarra)\
**Post date:** [September 10, 2020, 8:27am UTC](https://discourse.holoviz.org/t/css-rule-is-clobbered-by-panel-bokehs-inline-styles-on-html-elements/1185/2 "2020-09-10T08:27:19Z")

</div>

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

```
.yourclass {
    position: sticky !important;
}
```

---

<div class="post-metadata">

**Author:** ![nedned](https://discourse.holoviz.org/letter_avatar_proxy/v4/letter/n/59ef9b/32.png) [@nedned](https://discourse.holoviz.org/u/nedned)\
**Post date:** [September 11, 2020, 6:16am UTC](https://discourse.holoviz.org/t/css-rule-is-clobbered-by-panel-bokehs-inline-styles-on-html-elements/1185/3 "2020-09-11T06:16:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [September 11, 2020, 6:34am UTC](https://discourse.holoviz.org/t/css-rule-is-clobbered-by-panel-bokehs-inline-styles-on-html-elements/1185/4 "2020-09-11T06:34:08Z")

</div>

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.