My goal is to integrate Bokeh plots into portable html slideshows using WebSlides (unlike Reveal.js, which doesn't meet my requirements).
Below is a visual representation of the issue I am encountering, with the toolbar appearing misaligned:
https://i.sstatic.net/JsDHi.png
The steps I followed were:
1) I downloaded the source code for WebSlides
2) I created a basic Bokeh plot that provided me with the div and script components.
3) I inserted the necessary html links, div, and script components into the 'index.html' file in the WebSlides directory. The components were added using the guidelines from the Component Instructions for Bokeh 0.12.10. The div was placed within an empty component of WebSlides.
Any suggestions on how to rectify the toolbar misalignment would be greatly appreciated as I wish to continue using Bokeh for this purpose.
You can access a copy of the html document here, and a snippet without the javascript is provided below:
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.js"></script>
<BOKEH SCRIPT IS PLACED HERE>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
<!-- CSS WebSlides -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
</head>
<body>
<main role="main">
<article id="webslides" class="horizontal">
<section>
<div class="bk-root">
<div class="bk-plotdiv" id="dac8b20e-c981-49a6-8c18-cf0ca0ddc43a"></div>
</div>
</section>
</article>
</main>
<script src="static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<script defer src="static/js/svg-icons.js"></script>
</body>
</html>