Bokeh TextInput 将标题和输入框显示在同一行

Question

我想在输入框内联显示 TextInput 的标题，但默认情况下，它显示在 2 个单独的行上。

下面的代码在 Jupyter Notebook 中创建了一个 TextInput 框，但它在框上方显示了标题。如何让标题和输入框显示在同一行？

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)

当前输出：

期望的输出：

Answer 1

似乎没有可以更改标题位置的设置，但您可以通过将标题写入段落等外部小部件并在 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)

输出：

Answer 2

您可以通过制作目录应用程序而不是脚本应用程序来以更适当的方式执行此操作。目录应用程序可以有自定义模板，您可以在其中说

{% extends base %}

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

然后你可以做

.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;
}

并用

制作一个组件

css_classes=["horizontal"]

当然你也可以让所有东西都水平，或者加一个theme.yaml和

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

Bokeh TextInput 将标题和输入框显示在同一行

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

python

bokeh

当前输出：

期望的输出：