2

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.

mrz
  • 55
  • 1
  • 9
  • You could put each `Dropdown` in a HBox already and specify `width` and `height` of each HBox. You can then pass the HBoxes as children for the menu_bar. I didn't test, but this should work – j-i-l Dec 15 '15 at 11:39

2 Answers2

1

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;
}
euri10
  • 2,446
  • 3
  • 24
  • 46
  • thank you for this reply. I will use this in case there is no pythonic way to do this :) – mrz Nov 17 '15 at 20:20
  • I see none possible, at first I thought passing width and height parameters would do the job but it's really a margin issue and I fail to see a way to pass it in the python code. – euri10 Nov 17 '15 at 20:25
  • 2
    How do you override css on bokeh widgets? – volodymyr Nov 16 '16 at 23:40
1

You can put each Dropdown in a VBox already and specify width and height. Eg.:

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])
j-i-l
  • 10,281
  • 3
  • 53
  • 70