Search code examples
csstemplatesjinja2bokeh

Bokeh plot overwriting other content

How do I make my Bokeh plot show up to the right of some content?

I have a template where an image is correctly positioned relative to the other content. When I replace that image with the div provided by bokeh.embed.components it over-writes other content in the resulting html.

What I want is to replace the placeholder US map image below with a Bokeh plotenter image description here

What I get is that the Bokeh plot overwrites the content on the left enter image description here

Generating Script

import bokeh.plotting as blt
import bokeh.embed
import bokeh.resources

import jinja2

loader = jinja2.FileSystemLoader('.')
jenv = jinja2.Environment(line_statement_prefix='#', loader=loader)
t = jenv.get_template('bokeh_jinja.html')


blt.output_file('problem.html')
p = blt.figure(title='Problem Demonstration',
        x_range=[0.0, 10.0], y_range=[0.0, 10.0])
p.circle(1.0, 1.0)

#blt.show(p)


(script, div) = bokeh.embed.components(p)
with open('tmp.html', 'w') as ouf:
#    #ouf.write(t.render(bokeh_script='', bokeh_div="Hello World"))
    h = t.render(bokeh_script=script, bokeh_div=div, handedness='Right')
    ouf.write(h)

Template File

bokeh_jinja.html

<!DOCTYPE html>
<html lang="en">
<head>
<title> Layout Test 1 </title>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<style>
.summary-info {
    float: left;
    width: 30%;
}
</style>

<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
<script type="text/javascript">
    Bokeh.set_log_level("info");
</script>
{{bokeh_script}}
</head>



<body>
<div class="summary-info">
<div class="image-dec">
{% for image in images %}
<img src={{image}} alt="Image Not Found" height=256>
{% endfor %}
</div>

<div class="stats-block">
    <dl>
        <dt>Name:</dt><dd> {{name}}</dd>
        <dt>Position:</dt><dd> {{position}} </dd>
        <dt>Hand:</dt><dd> {{handedness}}</dd>
        <dt>Hometown:</dt><dd> {{hometown}}</dd>
        <dt>ML Teams:</dt><dd>{{teams|join(', ')}}</dd>
    </dl>
</div>
</div>
<div class="map">
{{bokeh_div}}
<!-- If I edit the resulting HTML and replace the bokeh generated div with
  this image, I get the kind of results I want
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_%28states_only%29.svg"
     alt="Map Not Found" height=512>
-->
</div>
</body>
</html>
Solution

  • The key missing parameter was setting display: flex; in the container holding the elements. Though this might bad style, I just set it as a parameter for the body, i.e. a section

    body {
    display: flex;
}

    in the CSS.