Search code examples
pythonplotmenubokehhbox

Bokeh widget spacing and alignment using VBox

I have been using Bokeh for my plots, and now need to add menus to my plots to display different outputs. The menus were created using the example on the 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)

Then I put these menus in a HBox:

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

With this approach, the layout of the resulting page can be found here. The menubars are too close to each other. I have two questions:

  • 1) How do I make sure there is some space between the menus?
  • 2) How can I change the alignment of the objects? For example, is it possible to have the widgets aligned on the right side of the box rather than the left side?

Many thanks in advance.

Solution

  • override the css I'd say for your question 1) I added margin-right: 40px;

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