CODEWITHSUNDEEP
pythonbokeh
Alex F
Alex F

Reputation: 955

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

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:

Upvotes: 2

Views: 1220

Answers (2)

Pepijn
Pepijn

Reputation: 4253

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"]

Upvotes: 0

Edoardo Guerriero
Edoardo Guerriero

Reputation: 1250

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

Upvotes: 5

Related Questions