Hey all, I’ve been banging my head on this problem for days and it seems so simple so hopefully you can help me.
Basically I want a responsive column layout where the column height will take up all available height of its container element and divide itself among its children. It does exactly what I want for width, but no matter what I try, I’ll end up with height overflowing.
I’ve pasted a minimal piece of code showing the problem I am facing with some comments with more information. I’ve tried:
- All kinds of combinations of adding sizing_mode to the various elements to no avail
- Tried serving the plot to an angular application to embed the plot in a component with various height fixing tactics on the containing element (position relative, max-height, height and such) but I’ll always end up with an overflow.
import bokeh import bokeh.layouts import bokeh.plotting f1 = bokeh.plotting.figure() f2 = bokeh.plotting.figure() # default # bokeh.plotting.show(bokeh.layouts.column(f1, f2)) # just place f2 under f1 with some default fixed width/height. Nothing crazy here # row # bokeh.plotting.show(bokeh.layouts.row(f1, f2, sizing_mode='stretch_width')) # stretches both figures equally to fill width. Totally responsive in width # column # bokeh.plotting.show(bokeh.layouts.column(f1, f2, sizing_mode='stretch_width')) # stretches both figures to fill width and causes overflow in height. Just to show sizing mode works for columns # bokeh.plotting.show(bokeh.layouts.column(f1, sizing_mode='stretch_height')) # stretches the figure to use up all available height. Single elements are handled as expected # the problem # bokeh.plotting.show(bokeh.layouts.column(f1, f2, sizing_mode='stretch_height')) # sizing_mode does nothing compared to default. I expect this to behave the same as stretch_width, but for height! bokeh.plotting.show(bokeh.layouts.column(f1, f2, sizing_mode='stretch_both')) # width as expected. height not