Расстояние между виджетами Bokeh и выравнивание с помощью 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) Как я могу изменить выравнивание объектов? Например, можно ли выровнять виджеты по правой стороне поля, а не по левой стороне?

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

2 ответа

Решение

Переопределить 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;
}

Вы можете поставить каждый 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])
Другие вопросы по тегам