Responsive height for bokeh.layouts.column

[sverbist]

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

Thanks!

[Bryan]

@sverbist please always include relevant version information on any support question for any project. I tried your code on OSX Safari and Chrome with 2.3.3. and 2.4dev, and stretch_both behaved as expected. All I can suggest, absent more information, is to make sure to upgrade to the latest version.

[sverbist]

Thanks for responding so quickly. My bad for not including the information. It was getting late.

bokeh is version 2.3.2

I’ve tried this on:
Firefox 90.0.2
Qutebrowser 2.3.0
Chromium 92.0.4515.107
Chrome 92.0.4515.131

I’ve also tried running it as a bokeh server on my host machine and opening the page in a virtual machine on firefox (v88.0).

I’ve added a screenshot below of my problem in Chrome where you can see that there’s a scrollbar added. The line I was running was the last one with ‘stretch_both’.

[sverbist]

Ok in my virtual machine I mentioned earlier I tried installing bokeh and running it from there. This worked as intended and it was version 2.3.3 as opposed to 2.3.2 om my host machine (which is the latest version on the arch repositories).

Installed 2.3.3 through pip om my host machine and it seems to work as expected now.

So whatever it was, it seems 2.3.3 fixed it.

Thanks for your help!

[MarcSkovMadsen]

There was a layout/ sizing_mode regression in 2.3.2. But it was fixed in 2.3.3

[sverbist]

That makes sense.
Is there also some special rulings for embedding a layout in another page? I’m working on a minimal angular application in which I want to embed a layout to take 100% of the allotted height. Though so far I’m still seeing a height overflow when embedding.

[sverbist]

Sorry. This was the same issue. Needed to update the js version of bokeh to make it work >.<

Was actively working on the problem while keeping an eye on this thread so ignore me xD