Toolbar misaligned when embedding Bokeh in WebSlides

Question

I am trying to embed Bokeh plots in to portable html slideshows using WebSlides (note that Reveal.js doesn't suit my needs).

The problem is illustrated below with the toolbar being misaligned:

My steps were:

1) I downloaded the source code for WebSlides

2) ran a simple Bokeh plot obtaining the div and script components

3) Inserted the relevant html links, div and scripts components in to 'index.html' from the WebSlides folder. The components were inserted using the Component Instructions for Bokeh 0.12.10. The div was inserted in to a blank component of the WebSlides.

Does anyone know how I might prevent the toolbar misalignment? Any advice, however vague is appreciated as I am loathe to dropping Bokeh for this application.

A copy of the html doc is here and a snippet without the javascript is 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&amp;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>

by the looks of it your icons are floated, and given enough width in their container they are attempting to wrap? Hard to say without looking at your code though. Can you post a working example that replicates the problem? Thats really the only way for anyone here to troubleshoot it. — Robert Wade
Thanks for the quick reply! I've added code. The css is in another file that comes with WebSlides. Interesting what you're saying about the wrapping. Perhaps it is a CSS conflict between Bokeh and WebSlides? — EB88

Mateusz Paprocki Mateusz Paprocki · Accepted Answer · 2017-11-02T12:47:33

Toolbars were reimplemented almost from scratch in bokeh 0.12.11dev1 and they don't use fragile float positioning anymore, so this shouldn't be an issue. You can follow our developer guide to get you started with dev version of bokeh. However, if the issue persists in 0.12.11dev1, please submit an issue with a complete, reproducible example.

Toolbar misaligned when embedding Bokeh in WebSlides

1 Answers