bokeh widget: custom css

问题

Is there any way to provide a custom CSS when making widgets in bokeh? E.g.:

        country_picker = widgets.MultiSelect(value=[],
                              title='country',
                              options=list(self.df['country_code'].unique()) + ['All'],
                              width=180,
                              height=120,
                              css=""".bk-layout-scale_height .bk  widget-form-input {
                                      height: 180px !important;} 
                              """)

I have one particular multi-selector that has 60+ options, so I'd like to make it high. While I'd like to keep other multi-selectors small.

回答1:

With the related PR5503 which has been recently merged into 0.12.5 it looks like that:

    country_picker = widgets.MultiSelect(value=[],
                          title='country',
                          options=list(self.df['country_code'].unique()) + ['All'],
                          width=180,
                          height=120,
                          css_classes=['myclass'] 
                          """)

I'm not sure how to describe the 'myclass' rules using bokeh yet.

回答2:

Specifically for MultiSelect widgets, you can set the number of visible items with MultiSelect.size instead of using custom css:

from bokeh.io import show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import MultiSelect

multi_select = MultiSelect(title="Option:", value=["foo", "qx"],
                           options=[("foo", "Foo"), ("bar", "BAR"), ("baz", "bAz"),
                                    ("qx", "Qx"), ("hid1", "Hid1"), ("hid2", "Hid2")])
multi_select.size=6
show(widgetbox(multi_select))

来源：https://stackoverflow.com/questions/40666632/bokeh-widget-custom-css