Styles.css and index.html file stopped working after upgrade bokeh from 2.3.1 to 3.1.0

Community Support
1

I was using bokeh version 2.3.1 till now and I modified my column headers of the data table using a styles.css file located in my folder “/app/static/css/styles.css”. I also have an index.html file located in “/app/templates/index.html”. The styles.css & index.html content can be found below. But I upgraded my bokeh yesterday to the latest version 3.1.0 and this whole thing stopped working. I just couldn’t find a way to fix it. Can anyone please help me? Thanks in advance!
I also attach here the before-bokeh version upgrade image. This nice formatting is totally gone after the upgrade.

before upgrading bokeh
before upgrading bokeh864×359 10.4 KB

styles.css:

.slick-header-column {
            background-color:rgb(89, 0, 255) !important;
            color: white !important;
            height: 45px !important;
            font-size: 11.5px !important;
            white-space: normal !important;
            background-image: none !important;
            }
.slick-row {
            background-color: white !important;
            background-image: none !important;
            font-size: 11.3px !important;
            border-bottom: rgb(126, 126, 126) !important;
            border-top: rgb(126, 126, 126) !important;
            color:black !important;
}
.slick-cell {
            padding: 1px !important;
            font-size: 11.3px !important;
}

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    {{ bokeh_css }}
    {{ bokeh_js }}
       <link rel="stylesheet" href="/app/static/css/styles.css"/>
  </head>
  <body>
  {{ plot_div|indent(8) }}
  {{ plot_script|indent(8) }}
  </body>
</html>
2

Please ignore it. I finally could fix it using InlineStyleSheet.

3

I was about to post a link to this new docs section, which I will still do for the benefit of any future readers:

FYI Bokeh recently encapsulated all of its own elements inside a shadow DOM, which is why the old methods for 2.x and earlier no longer can work.

4

@Thinh_Nguyen did you solve this? I am trying to do the same thing but seem to be missing the target now???

slick-header-columns doesn’t appear to be an element anymore…

image
image1672×535 53.2 KB

But targetting this also doesn’t work i.e.

<style>
  div.slick-pane.slick-pane-header.slick-pane-left{
    background-color: #17648D;
    font-family: arial;
    font-weight: bold;
    font-size: 10pt;
    color: #FFFFFF;
    text-align: right;
    }
</style>

dumped into an InlineStyleSheet doesn’t hit the table header.

What did you end up doing?

5

… You always get it within 10 minutes of posting about it.

I needed to get rid of … in my css string:

ss = InlineStyleSheet(css='''
  div.slick-pane.slick-pane-header.slick-pane-left{
    background-color: #17648D;
    font-family: arial;
    font-weight: bold;
    font-size: 10pt;
    color: #FFFFFF;
    text-align: right;
    }
'''

Works. Burning follow up question is why the ‘slick’ targets changed? Different underlying version of slick-grid?

6

Different underlying version of slick-grid?

FWIW Slickgrid was updated most recently for 3.0 and previously for 2.2

Screenshot 2023-04-18 at 09.08.03
Screenshot 2023-04-18 at 09.08.031136×270 36.6 KB

1 Like
7

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.