Line break in title for TextInput widget not working

Community Support
1

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, main.py:

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]])
curdoc().add_root(layout)

Here is my styles.css:

    .custom_button_bokeh button.bk.bk-btn.bk-btn-default {
        color: black;
        font-size:12pt;
        font-weight:bold;
        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;
        font-size:14pt;
        font-weight:bold;
    }

Here is my index.html:

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

My file structure is: buttonBokeh/templates main.py 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.

bokeh_label
bokeh_label1508Ă—658 89.1 KB

2

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]]])
curdoc().add_root(layout)

51%20PM
51%20PM1874Ă—212 5.64 KB

3

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.

4

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

5

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)
show(layout)
1 Like
6

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