Stylesheet clash when embedding bokeh charts

Community Support
1

I am using the template of the spectrogram example to embed a static bokeh chart in a styled flask website.

I get strange style effects, which I presume can be blamed on a stylesheet clash.

1. Code of the template

(the notes ad the bottom explain the non-self-explanatory elements)

{% extends “base.html” %}

{% block content %}

<head>

    <meta charset='utf-8' />

    <meta http-equiv='content-type' content='text/html; charset=utf-8' />

    {{ resources|indent(4)|safe }}

    {{ script|indent(4)|safe }}

</head>

<body>

    {{ div|indent(4)|safe }}

</body>

{% endblock %}

Notes to the code

  • resources are equal to plot_resources of line 42 of spectrogram.py. script and div are simply the components of my plot (a plain barchart)

  • the template inherits from a “base.html” template, which contains the following styling (it is the css of the flask.pocoo.org, which I like and you can find here)

**2. Image of the bokeh chart **

The black lines at the borders are not present when I do a simple show() of the chart or remove the stylesheet from base.html

Any idea on how to solve the styling clash? Thanks