Расстояние между виджетами боке и выравнивание с помощью VBox

Я использовал Bokeh для своих графиков, и теперь мне нужно добавить меню к своим графикам для отображения различных выходных данных. Меню были созданы на примере страницы Bokeh.

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])

При таком подходе макет итоговой страницы можно найти здесь. Строки меню расположены слишком близко друг к другу. У меня есть два вопроса:

  • 1) Как сделать так, чтобы между меню было свободное пространство?
  • 2) Как я могу изменить выравнивание объектов? Например, можно ли выровнять виджеты по правой стороне поля, а не по левой?

Спасибо заранее.


python menu bokeh plot hbox
person mrz    schedule 17.11.2015    source источник
comment
Вы можете уже поместить каждый Dropdown в HBox и указать width и height каждого HBox. Затем вы можете передать HBoxes как дочерние элементы для menu_bar. Я не проверял, но это должно работать   -  person jojo    schedule 15.12.2015

Ответы (2)


arrow_upward
1
arrow_downward

переопределить 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;
}
person euri10    schedule 17.11.2015
comment
спасибо за этот ответ. Я буду использовать это, если нет питонического способа сделать это :) - person mrz; 17.11.2015
comment
Я не вижу ничего возможного, сначала я думал, что передача параметров ширины и высоты справится с этой задачей, но на самом деле это проблема с маржой, и я не вижу способа передать ее в коде Python. - person euri10; 17.11.2015
comment
Как вы переопределяете CSS для виджетов боке? - person volodymyr; 17.11.2016

arrow_upward
1
arrow_downward

Вы можете уже поместить каждый Dropdown в VBox и указать width и height. Например.:

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])
person jojo    schedule 15.12.2015
comment
Обратите внимание, что VBox и HBox устарели. - person PJW; 21.02.2018