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)
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.