2017-02-23 8 views
0

Bokeh(0.12.4)を使用しているときに以下の問題が発生しました。 'Select'要素の幅を の内容を完全に表示できないように設定するとBokehはサイズを適応させます。BokehウィジェットCSS

これは、私が心に持っているレイアウトを壊す傾向があります(心配していますが、私は実際にはそれほど良くはありません)。 これです。 私の現在の「回避策」は、実際に次のHTMLテンプレートを定義することです:

、どうやら、ボケがないので
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <style> 
      @import url(https://fonts.googleapis.com/css?family=Noto+Sans); 
      body { 
       font-family: 'Noto Sans', sans-serif; 
       -webkit-font-smoothing: antialiased; 
       text-rendering: optimizeLegibility; 
       color: #fff; 
       background: #2F2F2F; 
      } 

      .selector select{ 
       width: 97%; 
       overflow: hidden; 
      } 
     </style> 
     <meta charset="utf-8"> 
     <title>Bokeh Crossfilter Example</title> 
     {{ bokeh_css }} 
     {{ bokeh_js }} 
    </head> 
    <body> 
     {{ plot_script|indent(8) }} 
     {{ plot_div|indent(8) }} 
    </body> 
</html> 

にCSSクラスとハードコードにスクリプトを(NBこれはボケの例から構成されています)それは theme.yaml

# -*- coding: utf-8 -*- 
from bokeh.layouts import row 
from bokeh.models import Select 
from bokeh.plotting import curdoc, figure 

def plot_placeholder(): 
    p = figure(tools='pan,box_zoom,reset',responsive=True); 
    return p 

############################################ 
#options 
Data = ['Supercalifragilisticexpialidocious', 'dumb', 'example'] 
sel = Select(title='Option 1', value = 'None', options = ['None'] + Data, name='OptionSelector', css_classes=['selector']) 

############################################################################# 
layout = row([sel, plot_placeholder()], sizing_mode='fixed', width=400) 

curdoc().add_root(layout) 
curdoc().title = "Statistical Plots" 

この作品を通じて提供されていますが、私は1つは、Pythonのみ の実装でこれを行うことができるかどうか思ったんだけど場合は、同じ設定を受け入れます。 など。私はテンプレートを定義せずにすべてのセレクタにプロパティを強制的に行うことができるかどうかを知りたいと思います。

さらに、この問題への拡張として、どのように私はテンプレートに頼ることなくボケにCSSファイルを渡すことができます。私はCSSResourcesを試してみましたが、リストが変更可能ではないように見えるCSSファイルのリストを生成している間はどこにも行きませんでした。

答えて

1

最後の質問に関しては、 のようなレイアウトにすることができます(簡単にするために、私はindex.htmlと同じディレクトリにstyles.cssを入れていますが、static/css/stylesあなたが望むなら.css)。詳細について

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
      <meta charset="utf-8"> 
      <title> Title here </title> 
      {{ bokeh_css }} 
      {{ bokeh_js }} 
      <style>  
       {% include 'styles.css' %} 
      </style> 
+0

感謝。私の目標は、Pythonの外で最小限の作業しか必要としないBokehアプリケーションです(できればnone)。 – Nox

+0

私はこれらの値をPython内で設定しようとしていますが、後で解決策を見つけることができるかどうかを教えてくれます。 – Anthonydouc

関連する問題