Responsive, unequal column widths with bokeh server

This feels a very standard thing but I can’t figure out how to do it with bokeh server:

Goal: I have four columns in my dashboard, leftmost is for variable selections (couple Multiselect widgets), second for different drowdowns and other widgets, and next two are for plots. What I would like to achieve is that width of the first one is determined based on the length of the variable names in Multiselect (maybe with some upper limit though), second panel has a constant size (does not depend on the data), and the two plot panels occupy the rest of the space. And when resizing the browser window (or using different screen), everything should scale accordingly.

When using any of the responsive sizing_modes, it looks like every column has an equal width, which obviously looks awful as the variable and control panels don’t need that much space. With fixed size I can of course change the proportions but then I lose the responsivity.

Any ideas? My current idea is that I should maybe just use fixed sizes, and then add some custom css to the columns like flexbox or something to make everything responsive again?

Hi,

The Bokeh layout system is ultimately not going to be as robust and a feature-ful as our ambitions had intended. Essentially we would need more people, with more expertise, to help improve it much more. If you just have one column of widgets to the left of a plot, say, you should be able to place the widgets in a "widgetbox" that can be explicitly sized for fixed width, and leave everything else responsive. That's probably the best supported use case currently, and is demonstrated in several examples in the "examples" directory of the repository, e.g the "movies" example.

As an acknowledgement of these limitations, we are currently working on a PR to allow individual Bokeh document roots to be laid out arbitrary Jinja templates, so that users can place each plot or widget, etc in a template that uses whatever JavaScript layout library they choose, instead of relying on Bokeh's layout options. This will afford much greater control over layout at the cost of more explicitness, but is probably the best we can do with the resources we have. You can follow the PR here:

  Allow easy customization of HTML templates by mattpap · Pull Request #7708 · bokeh/bokeh · GitHub

Thanks,

Bryan