bokeh layout vertical alignment with buttons

情到浓时终转凉″ 提交于 2019-12-13 05:07:43

问题


I am looking for a workaround to an issue in Bokeh. When you put a button and a text input in a row- they will be un-alighned. This effect happens because the text input has a label and is described here: https://github.com/bokeh/bokeh/issues/4817

screenshot of messed up alignment

Example code:

# hello.py 

from bokeh.io import curdoc
from bokeh.layouts import column, row
from bokeh.models.widgets import TextInput, Button, Paragraph

# create some widgets
button = Button(label="Say HI")
input = TextInput(value="Bokeh")
output = Paragraph()

# add a callback to a widget
def update():
    output.text = "Hello, " + input.value
button.on_click(update)

# create a layout for everything
#layout = VBox(children=[HBox(children=[button, input]), output])
layout = column(row(button, input), output)

# add the layout to curdoc
curdoc().add_root(layout)

回答1:


set css_classes property of the TextInput:

input = TextInput(value="Bokeh", css_classes=["hide-label"])

Add style to index.html in templates folder if your application is a folder:

<style>
.hide-label label{
    display: none !important;
}
</style>

If the application is a script file, then add a Div element with the style sheet.



来源:https://stackoverflow.com/questions/50317827/bokeh-layout-vertical-alignment-with-buttons

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!