Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom CSS not working in bokeh-1.1.0dev6

See original GitHub issue

I’ve created a custom CSS for modifying styles of dropdown buttons. I’m using bokeh-1.1.0dev6 version and in the output, I can see that the CSS styles are not reflecting. This was working fine till version 1.0.4. Is this something related to the recent update in layouts?

The CSS code is below:

.bk-root {
    font-family: georgia;
    font-size: 10pt;
    position: relative;
    width: auto;
    height: auto;
}
.bk-root .bk-widget-box {
    overflow: visible;
    padding: 10.1px 15px;
}

.bk-root .bk-widget label {
    margin-bottom: 2px;
}

.bk-root .bk-widget select {
    min-width: 50%;
}
.bk-root .bk-widget-form-input {
    -moz-appearance: none;
	font-family: georgia;
    font-size: 9pt;
    display: block;
    padding: 0;
    height: 30px;
    color: whitesmoke;
    background-color: #05b7ff;
    border: 1px solid #ccc;
    border-radius: 40px;
    border-color: whitesmoke;
}

.bk-root .bk-bs-btn-default.bk-bs-active{
    color: whitesmoke;
    background-color: #05b7ff;
    border-color: whitesmoke;
      -webkit-appearance: none;
}

.bk-root .bk-bs-btn-default {
    color: #333;
    background-color: whitesmoke;
    border-color: #ccc;
    margin-top: 17px;
}

Screenshots:

Expected output:

Current output:

Thanks.

Issue Analytics

State:
Created 5 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

cuxcridercommented, May 22, 2019

@samirak93 I seem to have got it, maybe a little differently than you did. I’m not sure of the pros/cons. My file structure is buttonBokeh/templates

Here is my buttonBokeh/main.py code:

from bokeh.layouts import layout
from bokeh.plotting import curdoc
from bokeh.models import Button

button = Button(label = "Test Button", css_classes =['custom_button_bokeh'])
layout = layout([[button]])
curdoc().add_root(layout)

And here is buttonBokeh/templates/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      {{ bokeh_css }}
      {{ bokeh_js }}
      <style type="text/css">{% include 'styles.css' %}</style>
    </head>
    <body>
      {{ plot_div|indent(8) }}
      {{ plot_script|indent(8) }}
    </body>
</html>

And here is the buttonBokeh/templates/styles.css

.custom_button_bokeh button.bk.bk-btn.bk-btn-default {
    color: black;
    font-size:12pt;
    background-color: #05b7ff;
    border-color: #05b7ff;
}

I run it with:
bokeh serve --allow-websocket-origin=ip_address:xxxx buttonBokeh --port xxxx

0reactions

bryevdvcommented, Aug 25, 2020

I’m not sure there is any action to take here, CSS targets are stabilizing over time but still subject to development.