2017-11-02 18 views
0

WebSlidesを使用してBokehプロットを埋め込みしようとしています(Reveal.jsが私のニーズに合わないことに注意してください)。WebSlidesにBokehを埋め込むときにツールバーの位置がずれて

問題は、ツールバーの位置がずれていると、以下に説明される:

私の手順は以下のとおりであった:

1)私は)WebSlides

2のソースコードをダウンロードしsimple Bokeh plotを走りましたdivとスクリプトコンポーネントを取得する

3)関連するHTMLリンク、divおよびscriptsコンポーネントをWebSlidesフォルダから 'index.html'にコピーします。コンポーネントは、Bokeh 0.12.10用にComponent Instructionsを使用して挿入しました。 divは、WebSlidesの空のコンポーネントに挿入されました。

どのように私はツールバーのミスアライメントを防ぐかもしれないか知っていますか?私はこのアプリケーションのためにBokehを落とすことに嫌悪感があるので、漠然としたアドバイスは感謝しています。

HTMLドキュメントのコピーがhereあるとJavaScriptのないスニペットは以下の通りです:

<!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.pydata.org/bokeh/release/bokeh-0.12.10.min.css" 
     rel="stylesheet" type="text/css"> 

     <script type="text/javascript" src="https://cdn.pydata.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> 
+0

あなたのアイコンは浮かれていて、コンテナに十分な幅を入れてラップしようとしていますか?あなたのコードを見ずに言うのは難しいです。問題を再現する実例を投稿できますか?これは誰かがトラブルシューティングを行う唯一の方法です。 –

+0

クイック返信ありがとう!私はコードを追加しました。 CSSはWebSlidesに付属する別のファイルにあります。ラッピングについてあなたが言っていることに興味があります。おそらく、BokehとWebSlidesのCSSの競合ですか? – EB88

答えて

0

ツールバーは、ボケ0.12.11dev1のほぼゼロから再実装された、彼らはもう壊れやすいfloatポジショニングを使用していませんこれは問題ではありません。 developer guideに従うことで、開発版のbokehを使い始めることができます。ただし、0.12.11dev1に問題が続く場合は、完全で再現可能な例をissueに送信してください。

関連する問題