Line break in title for TextInput widget not working

I would like to break a long title for my TextInput widget into two lines.

I am using a css style because I would like change the size, font, etc for the TextInput.

My css style is working and I get can get bold font and change the size of the widget, but for some reason I cannot get a line break in the title. I initially just tried using
in TextInput.title but that just displayed
on screen. Now I have moved on to trying to setup the styles.css to do this by setting widths of div and label. This is probably a pretty simple fix, I just don’t understand css and html all that well.

Here is my python file,

from bokeh.layouts import layout
from bokeh.plotting import curdoc
from bokeh.models import Button
from bokeh.models.widgets.inputs import TextInput

button = Button(label = "Test Button", css_classes =['custom_button_bokeh'])
entry = TextInput(title = "Test long label for entry" , value='test value', css_classes=['custom_input_bokeh'])
layout = layout([[button, entry]])

Here is my styles.css:

    .custom_button_bokeh button.bk.bk-btn.bk-btn-default {
        color: black;
        background-color: #05b7ff;
        border-color: #05b7ff;

    .custom_input_bokeh div.bk.bk-input-group{
        width: 125px;

    .custom_input_bokeh input.bk.bk-input {
        width: 125px;
        font-size: 14pt;
        font-weight: bold;

    .custom_input_bokeh label.bk {
        width: 125px;
        display: inline-block;

Here is my index.html:

    <!DOCTYPE html>
    <html lang="en">
          <meta charset="utf-8">
          {{ bokeh_css }}
          {{ bokeh_js }}
          <style type="text/css">{% include 'styles.css' %}</style>
          {{ plot_div|indent(8) }}
          {{ plot_script|indent(8) }}

My file structure is: buttonBokeh/templates resides in buttonBokeh and styles.css and index.html are in templates. I run the code with: bokeh serve --allow-websocket-origin=ipAddress:xxxx buttonBokeh --port xxxx

Here is a screenshot of inspect from Chrome. For testing I don’t really care where this label is broken into a second line, I just want to understand how to break it at all.

Unfortunately TextInput does not support line breaks for titles, and trying to modify layout-related things via CSS will probably interact badly with Bokeh’s own layout computations. I’m not saying it’s impossible, but I don’t know how you could do it reliably. Rather, I’d suggest faking a “title” with a Bokeh Div above the text entry (which has no title of its own). Here is a simplified version:

rom bokeh.layouts import grid
from bokeh.plotting import curdoc
from bokeh.models import Button, Div
from bokeh.models.widgets.inputs import TextInput

button = Button(label = "Test Button", css_classes =['custom_button_bokeh'])
title = Div(text="<div>Test long label</div><div>for entry</div>", width=100)
entry = TextInput(title="" , value='test value', width=100)
layout = grid([[button, [title, entry]]])

Thanks for this solution @Bryan . I’m trying to implement it now and wondering if there’s a way to adjust font size within the Div object… preferably without writing additional html! i’ve tried playing with the default_size property but no dice.

FYI I’ve tried fighting with some html along the lines of embedding something like this: html - How can I set the font-family & font-size inside of a div? - Stack Overflow

Darn, as soon I ask the question I find a solution. Here’s my working example:

from bokeh.plotting import figure
from bokeh.models import Div
from bokeh.layouts import layout, column, row

plot = figure(tools=['wheel_zoom','reset'],x_range=(0,10000),y_range=(0,1500),width=900,height = 600)
title=Div(text ='<div class="monika" align="right" style="font-size:180%">Bigger?</div> <div>Be smaller  </div>')
layout = column(title,plot)
1 Like

Has happened to me more times than I can count :smiley: