Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

sizing mode scale_both grows on window resize

See original GitHub issue

I’m building a layout with nested rows and columns using the new HTML template feature and bootstrap/flexbox. I would expect that the bokeh plots would just fill the available space. However, the plots start small and grow on every window resize, even though the bootstrap columns/rows resize correctly. ezgif com-gif-maker

from IPython import embed
from bokeh.layouts import row, column, layout, gridplot, Spacer, widgetbox
from bokeh.io import curdoc
from bokeh.models.widgets import Slider
from bokeh.plotting import figure
from bokeh.embed import components

size = 500⋅
figs = []
sizing_mode = 'scale_both'
for ii in range(4):
    fig = figure(plot_width=int(size), plot_height=int(size), name='freq' + str(ii), sizing_mode=sizing_mode)
    fig.circle(0, 0, radius=1, fill_color="green")
    figs.append(fig)
for ii in range(3):
    fig = figure(plot_width=int(size), plot_height=int(size), name='flux' + str(ii), sizing_mode=sizing_mode, tags=['fluxlike'])
    fig.circle(0, 0, radius=1, fill_color="red")
    figs.append(fig)

sliders = []
for ii in range(9):
    sliders.append(Slider(start=0, end=5))

slidercol1 = column(widgetbox(*sliders[:5], height=20, width=size, sizing_mode='scale_width'), name='sliders1')
slidercol2 = column(widgetbox(*sliders[5:], height=20, width=size, sizing_mode='scale_width'), name='sliders2')
sliderrow = row(slidercol1, slidercol2, sizing_mode='scale_width')

for fig in figs:
    curdoc().add_root(fig)

curdoc().add_root(slidercol1)
curdoc().add_root(slidercol2)

{% extends base %}
{% block preamble %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<style>
.p0 { background-color: red; }
.p1 { background-color: green; }
.s0 { background-color: green; }
.s1 { background-color: blue; }

.container-fluid {
  flex-wrap: nowrap;
  height: 50vh;
}

.col {
  flex-wrap: nowrap;
  flex-basis: auto;
  flex-shrink: 1;
  border: 2px solid red;
  margin: 1px;
  min-width: 0;
}

.square:before {
  content:'';
  float:left;
  padding-top:100%;
}

.row {
  flex-wrap: nowrap;
}

.bigrow {
  display:flex;
}
</style>

{% endblock %}
{% block contents %}
  <div class="container-fluid">
    <div class="bigrow">

      {% for root in roots %}
        {% if "fluxlike" in root.tags %}
          <div class="col square">
            {{ embed(root) }}
          </div>
        {% endif %}
      {% endfor %}

      <div class="col square">
        <div class="row">
          <div class="col square">
            {{ embed(roots.freq0) }}
          </div>
          <div class="col square">
            {{ embed(roots.freq1) }}
          </div>
        </div> {# row #}
        <div class="row">
          <div class="col square">
            {{ embed(roots.freq2) }}
          </div>
          <div class="col square">
            {{ embed(roots.freq3) }}
          </div>
        </div> {# row #}
      </div> {# col square #}
    </div> {# bigrow #}


    <div class="bigrow">
      <div class="col">
        {{ embed(roots.sliders1) }}
      </div>
      <div class="col">
        {{ embed(roots.sliders2) }}
      </div>
    </div> {# bigrow #}
  </div> {# container-fluid #}
{% endblock %}

Python version : 3.6.5 | packaged by conda-forge | (default, Apr 6 2018, 13:39:56) IPython version : 6.3.1 Bokeh version : 0.13.0dev8-dirty BokehJS static path : /home/karel/working/bokeh/bokeh/server/static node.js version : v8.10.0 npm version : 6.1.0