[BUG] Custom CSS broken
u3Izx9ql7vW4 opened this issue · comments
Software versions
Python version : 3.11.9 (main, Apr 2 2024, 08:25:04) [Clang 15.0.0 (clang-1500.3.9.4)]
IPython version : 8.15.0
Tornado version : 6.3.3
Bokeh version : 3.4.1
BokehJS static path : /opt/homebrew/lib/python3.11/site-packages/bokeh/server/static
node.js version : v22.0.0
npm version : 10.5.1
jupyter_bokeh version : (not installed)
Operating system : macOS-14.4.1-arm64-arm-64bit
Browser name and version
Edge 124.0.2478.51
Jupyter notebook / Jupyter Lab version
No response
Expected behavior
I'm trying to add a border around my figures. None of the CSS to be applied with the use of either styles.css, InlineStyleSheet, and the css_classes parameter show up.
Observed behavior
No styles are applied
Example code
This is my styles.css
:root, :host {
--bokeh-base-font: 'Inter' !important
}
.bk-layer {
border: 1px solid #ccc !important
}
.bordered {
border: 1px solid #ccc !important;
}
:host .bordered {
border: 1px solid #ccc !important;
}
Only the first one is applied. The rest are ignored.
I also tried inline styling:
```python
stylesheet = InlineStyleSheet(css="""
.bk-layer {
border: 1px solid #ccc !important
}
""")
p = figure(... stylesheets=[stylesheet], css_classes=['bordered'])
### Stack traceback or browser console output
_No response_
### Screenshots
_No response_
@user293811 We absolutely must have a complete Minimal Reproducible Example that we can take and run, as-is, in order to investigate.
@bryevdv issue resolved. needed to wrap css in :hover(...) {}
, I wasn't able to find any documentation of this anywhere.
@user293811 I don't know why that should be necessary at all. There are examples like styling/dom/css_classes.py
that are maintained under CI image tests that definitely apply similar CSS successfully without doing anything with hover
. But again, without complete code to see what you are actually doing there is no way to speculate about what is going on.