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&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>
あなたのアイコンは浮かれていて、コンテナに十分な幅を入れてラップしようとしていますか?あなたのコードを見ずに言うのは難しいです。問題を再現する実例を投稿できますか?これは誰かがトラブルシューティングを行う唯一の方法です。 –
クイック返信ありがとう!私はコードを追加しました。 CSSはWebSlidesに付属する別のファイルにあります。ラッピングについてあなたが言っていることに興味があります。おそらく、BokehとWebSlidesのCSSの競合ですか? – EB88