How do we use index.html and styles.css for widgets on a Bokeh server?

[globox]

I am trying to style widgets on my Bokeh server, including some Dropdowns, CheckboxGroups, RangeSlider, Tabs, and Divs.

I have tried using serve static, jinga2, a separate index.html and styles.css file but somehow, nothing is working. My first test case is the very simple goal of making the names of the Tabs bold but even that is not working. I’ve tried at least 5-6 different approaches including this one but I am pretty stuck now.

Here is my code to create my Tabs

# From createPlot() function above:
    layout = row(
        plot,
        column(
            spaceDiv,
            numberDiv,
            dropdownRow,
            checkboxGroup1,
            checkboxGroup2,
            slider1,
            slider2,
            sizing_mode="scale_both",
        ),
        sizing_mode="scale_both",
    )

    return TabPanel(child=layout, title="Tab A" if table=="Table1" else "Tab B")

plotA = createPlot("path_to_DB", "Table1")
plotB = createPlot("path_to_DB", "Table2")
tabs = Tabs(tabs=[plotA, plotB], sizing_mode="scale_both")
curdoc().add_root(tabs)

And here is the HTML of the tabs that my browser is rendering on my localhost URL:

<div class="bk-header">
    <div class="bk-tab bk-active" tabindex="0">Tab A</div>
    <div class="bk-tab" tabindex="0">Tab B</div>
</div>

Whatever works here, I can just use to scale up and apply to the other elements with different class names (which might mean an index.html and styles.css approach is the way to go). Thank you!

[jzimmer]

Instead of using a separate styles.css file, have you tried using InlineStyleSheet from within your python code?

See the docs:

Styling DOM elements

Maybe this helps, too:

DataTable requires custom scaling in Bokeh 3.1.0

In Bokeh 3, a DataTable occupies to much space. This causes vertical and horizontal scroll lines in the browser window, which did not happen in Bokeh 2. I was able to work around this issue with InlineStyleSheet(css=":host {width:98%; height:98%;}") Should I report this as an issue on GitHub, or is this desired behaviour? """Test plotting a grid in bokeh. In bokeh 2.* this works as intended. In bokeh 3.1.0, this page shows both vertical and horizontal scroll bars, which is undesired. This…

[globox]

I did try! It does not seem to work for my RangeSliders or my Dropdowns:

.bk-slider-title {
        font-size: 20px;
}

.bk-btn-group.bk-horizontal {
        font-size:20px;
}

.bk-input-group {
        font-size:20px;
}

[globox]

This much is working:

styling = InlineStyleSheet(css="""
    .bk-tab.bk-active { 
        background-color: green; 
        color: white;
        font-size: 20px;
    }

    .bk-tab { 
        background-color: white; 
        color: black;
        font-size: 20px;
    }

""")

[Bryan]

cc @mateusz

[rocheseb]

With this template file:

{% extends base %}

{% block postamble %}

{% include 'styles.css' %}

{% endblock %}

and this css:

.bk-tab {
background-color: red;
}

the css gets placed at the end of the head block and doesn’t change the tabs.

It is applied as expected if instead I add it inside the bk-Tab div styles (and this is exactly where the css is added when using InlineStyleSheet)

[comperem]

I’m attempting something similar.

My bokeh serve application’s look in 3.0 is quite different from 2.4.0.

The page has Div, Button, RadioButtonGroup, MultiChoice, and
DataTable elements.

The Button elements seem the most different. They occupy about 50% of the previous screen area and have changed the flow and layout of the other elements. Buttons seem to be less tall and less wide by default now.

I’m watching this thread to see how to get back to 2.4 sizing and placement.

Apparently CSS changed to per-object specification, which is fine, but it’s not clear how to migrate back to the previous look and feel.

This tip and bug report seems to help but again, it’s not obvious.