Hi Sebastien,
Do you know how to adjust the height of CheckBoxGroup. I followed your button example:
myapp/main.py:
from bokeh.io import curdoc
from bokeh.models.widgets import CheckboxGroup
myList = [‘A’, ‘B’, ‘C’,‘D’,‘E’,‘F’,‘G’, ‘H’, ‘I’,‘J’,‘K’,‘L’,‘M’, ‘N’, ‘O’,‘P’,‘Q’,‘R’,‘S’,‘T’,‘U’,‘V’,‘W’, ‘X’, ‘Y’,‘Z’]
chk_group = CheckboxGroup(labels = myList, active=,css_classes=[‘customCheckboxGroup’])
curdoc().clear()
curdoc().add_root(chk_group)
myapp/templates/styles.css:
.customCheckboxGroup {
height: 50px;
}
myapp/templates/index.html:
{{ bokeh_css }}
{{ bokeh_js }}
{% include 'styles.css' %}
{{ plot_div|indent(8) }}
{{ plot_script|indent(8) }}
Any suggestion?
···
On Friday, January 26, 2018 at 11:23:43 AM UTC-8, Sébastien Roche wrote:
Here is an example of how to use custom css with the bokeh server, here i show two buttons with different styles.
In the folder “myapp”
myapp/main.py
from bokeh.io import curdoc
from bokeh.models import Button
button_1 = Button(label=“custom button 1”,css_classes=[‘custom_button_1’])
button_2 = Button(label=“custom button 2”,css_classes=[‘custom_button_2’])
curdoc().add_root(button_1)
curdoc().add_root(button_2)
``
myapp/templates/index.html
{{ bokeh_css }}
{{ bokeh_js }}
{% include 'styles.css' %}
{{ plot_div|indent(8) }}
{{ plot_script|indent(8) }}
``
myapp/templates/styles.css:
.custom_button_1 {
width: 500px;
}
.custom_button_1 button.bk-bs-btn.bk-bs-btn-default {
background-color: lightblue;
font-weight: bold;
color:navy;
border-style:solid;
border-width: 10px;
border-color:navy;
height: 300px;
}
.custom_button_2 {
width: 200px;
}
.custom_button_2 button.bk-bs-btn.bk-bs-btn-default{
border:none;
background-color:orange;
height: 80px;
}
``
Not sure why you need to adjust the height for the button itself and the width for the container div, but this works.
