Bokeh TextInput show the title and input box in the same line

user_4581085 0
Viewed 698

I'd like to display the title for TextInput inline with the input box, but by default, it displays on 2 separate lines.

The code below creates a TextInput box in a Jupyter Notebook, but it shows the Title above the box. How can I make the title display on the same line as the input box?

from bokeh.layouts import column, row
from bokeh.models.widgets import Slider, TextInput
from bokeh.plotting import ColumnDataSource, figure, output_file, show, reset_output, output_notebook

reset_output()
output_notebook()

layout = row([TextInput(title='my label:', value='something')])

show(layout)

Current Output:

Desired Output:

bokeh python
2 Answers

It seems there's no setting that can change the title position, but you can achieve a similar result by writing the title on an external widget like Paragraph and by leaving empty the title argument inside TextInput:

from bokeh.layouts import column, row
from bokeh.models import Paragraph
from bokeh.models.widgets import Slider, TextInput
from bokeh.plotting import ColumnDataSource, figure, output_file, show, reset_output, output_notebook

reset_output()
output_notebook()

title_ = Paragraph(text='my label', align='center')
layout = row([title_, TextInput(title='', value='something')])

show(layout)

Out:

enter image description here

user_116441190

You can do this in a more proper way by making a directory app rather than a script app. Directory apps can have custom templates where you can say

{% extends base %}

{% block postamble %}
  <link href="app/static/bokeh.css" rel="stylesheet"> 
{% endblock %}

And then you can do

.bk-root .horizontal .bk-input-group {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.bk-root .horizontal .bk-input-group label {
    flex: 0 0 200px;
}

And make a component with

css_classes=["horizontal"]

Of course you can also make everything horizontal, or add a theme.yaml with

attrs:
  InputWidget:
    default_size: 500
    css_classes: ["horizontal"]
user_1836620
Related