Div container size goes to 0x0 when in initial browser window size

Community Support
1

I am trying to display images by URL reference using the div widget and have them dynamically sized. The issue I am having is that whatever size you have your window at when you load the page, the div element with the img is 0 x 0 at that size. Changing the window to any other size adjusts it as expected, but if you go back to the initial dimensions it disappears. Is there something wrong with how I am setting up the resize properties (max-width in css and stretch_both in the Bokeh column instance) ?
Here is a screen-grab I took illustrating the issue: link

Here is a minimal example using bokeh serve in directory format (bokeh version 2.3.2):

resize_test
  templates
    index.html
  main.py

main.py:

from bokeh.plotting import curdoc
from bokeh.models.widgets import Div, Select
from bokeh.layouts import row, column

options = [
    ('<img src="https://eoimages.gsfc.nasa.gov/images/imagerecords/148000/148336/menindeelakes_oli_201933_lrg.jpg">', "Menidee Lakes"),
    ('<img src="https://eoimages.gsfc.nasa.gov/images/imagerecords/148000/148350/erie_tmo_2021132_lrg.jpg">', "Lake Erie"),
]
select = Select(title="NASA Image", options=options, value=options[0][0])
image = Div(text=select.value, width=1000, height=1000)

def update_image(url):
    image.text = url

select.on_change('value', lambda attr, old, new: update_image(select.value))

box = column([select], width=300)
img = column(image, sizing_mode="stretch_both")
curdoc().add_root(row(box, img, name="resize_test"))

index.html:

{% extends base %}

{% block postamble %}
<style>
img {
    max-width: 100%;
}
</style>

{% endblock %}

{% block contents %}
<div id="bokeh-app">
    {{ embed(roots.resize_test) }}
</div>
{% endblock %}
2

@zdgriffith

What version of bokeh are you using?

If the latest (2.3.x series), see this issue/bug report on the bokeh GitHub site in case the regression with the Div model is directly (or tangentially) related to the behaviors you observe.

https://github.com/bokeh/bokeh/issues/11161

3

Unfortunately I have to don’t have time to write an explanation just now but here is a version that works for me, if I understand your ask:

image = Div(text=select.value)

def update_image(url):
    image.text = url

select.on_change('value', lambda attr, old, new: update_image(select.value))

box = column([select], width=300, sizing_mode="fixed")
layout = row(box, image, sizing_mode="stretch_both", name="resize_test")

curdoc().add_root(layout)
4

I am using version 2.3.2. I just tried a bunch of versions and I get the expected behavior for versions <=2.0.1. I will look into the issue you linked - thanks for that information!

5

Yes that does work for me! Thanks for the fast response.