bokeh responsive row with items of unequal width

Question

I'm trying to create a responsive row in bokeh 0.12.3 that contains a figure and a widgetbox, where the widgetbox has a much smaller width than the figure.

I'm able to achieve only the former with the following:

from bokeh.io import output_file, show
from bokeh.layouts import row, widgetbox
from bokeh.models.widgets import RadioButtonGroup, TextInput
from bokeh.plotting import figure

output_file("layout.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create a new plot
s1 = figure(width=600, plot_height=600, title=None)
s1.circle(x, y0, size=10, color="navy", alpha=0.5)

widgets = widgetbox([RadioButtonGroup(labels=["a", "b"]), TextInput(title="Input:", width=150)], width=150)

# put the results in a row
show(row([s1, widgets], responsive=True))

But this produces a responsive row where the width of the figure and widgetbox are equal. On tablets and mobile devices this can use up a lot of precious screen real-estate.

The docs on layouts http://bokeh.pydata.org/en/latest/docs/user_guide/layout.html specify that every item must have the same sizing mode, but not that every item must have the same size. I can't find any reference on setting relative sizes of each item.

I've played around with various options like sizing_mode, and setting widths at various levels, but I can't produce the desired behaviour.

Answer 1

As of Bokeh 0.12.3 equal-sizes for children is the only available option for the built-in Bokeh layouts such as row, etc. However, you could possibly embed the different children into your own HTML template, using the bokeh.embed functions, which would give you finer control over things.

For instance, if you call:

components((s1, widgetbox))

Then you will get back a tuple:

(script, (s1_div, widgetbox_div)) 

You can template the <script> and the two <div>s into an HTML template. The components will show up wherever you insert the <div>s.