使用VBox进行散景小部件间距和对齐

时间:2015-11-17 13:34:52

标签: python plot menu bokeh hbox

我一直在使用Bokeh作为我的情节,现在需要在我的情节中添加菜单以显示不同的输出。菜单是使用Bokeh page

上的示例创建的
from bokeh.models.widgets import Dropdown
from bokeh.io import output_file, show, vform
menu = [("Item 1", "item_1"), ("Item 2", "item_2"), None, ("Item 3","item_3")]
dropdown = Dropdown(label="Dropdown button", type="warning", menu=menu)
dropdown2 = Dropdown(label="Dropdown button2", type="warning", menu=menu)

然后我将这些菜单放在HBox中:

menu_bar = HBox(children = [dropdown, dropdown2])

使用这种方法,可以找到结果页面的布局here。菜单栏彼此太靠近了。我有两个问题:

  • 1)如何确保菜单之间有空格?
  • 2)如何更改对象的对齐方式?例如,是否可以将小部件对齐在盒子的右侧而不是左侧?

非常感谢提前。

2 个答案:

答案 0 :(得分:1)

覆盖css我说的问题1)我添加了margin-right: 40px;

.bk-bs-btn-group, .bk-bs-btn-group-vertical {
    display: inline-block;
    margin-right: 40px;
    position: relative;
    vertical-align: middle;
}

答案 1 :(得分:1)

您可以将每个Dropdown放入VBox,并指定widthheight。例如:

from bokeh.models.widgets import Dropdown, VBox

menu = [("Item 1", "item_1"), ("Item 2", "item_2"), None, ("Item 3","item_3")]
dropdown = Dropdown(label="Dropdown button", type="warning", menu=menu)
dropdown2 = Dropdown(label="Dropdown button2", type="warning", menu=menu)

# put them into boxes and specify their width/height
dropdown_box = VBox(dorpdown, width=100, height=50)
dropdown2_box = VBox(dorpdown2, width=100, height=50)

menu_bar = HBox(children = [dropdown_box, dropdown2_box])