CODEWITHSUNDEEP
python-2.7bokeh
bananas
bananas

Reputation: 3

Bokeh remove vertical spaces between div widgets

I'm trying to use div widgets in bokeh as a side panel to my data. I want them to stack above one another with no white space in between.

Here is my simplified code:

from bokeh.models.widgets import Div
from bokeh.layouts import column
from bokeh.io import show

benchmarktitle= Div(text="Benchmark", width=150, height=50,
style={'background-color':'#072A49', 'color':'white','font-family': 'Helvetica, arial, sans-serif', 'border':'0'})

selectedtitle= Div(text="Selected",  width=150, height=50, 
style={'background-color':'#072A49', 'color':'white','font-family': 'Helvetica, arial, sans-serif', 'border':'0'})

layout= column(children = [benchmarktitle,selectedtitle], sizing_mode="scale_height")

show (layout)

RESULT:

enter image description here

How can I eliminate the white space in between the two divs? I've tried adjusting the heights and setting line-height to zero but neither worked. I've tried different layouts like gridplot and row, and all the different sizing modes but the white space persists.

I'm a bit of a novice at this so any help or guidance would be much appreciated.

Upvotes: 0

Views: 572

Answers (1)

Seb
Seb

Reputation: 1775

If you don't need them to be in separate Div bokeh objects, you can define all the html you want in a single Div text:

from bokeh.models.widgets import Div
from bokeh.layouts import column
from bokeh.io import show

div_text = """
<div style="background-color:#072A49;width:150px;height:50px;color:white;border:0;font-family':Helvetica,arial,sans-serif">Benchmark</div>
<div style="background-color:#072A49;width:150px;height:50px;color:white;border:0;font-family':Helvetica,arial,sans-serif">Selected</div>
"""

div = Div(text=div_text)


show(div)

Upvotes: 1

Related Questions