bokeh / bokeh

Interactive Data Visualization in the browser, from Python

Home Page:https://bokeh.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[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.