Create plain text widget with font options

Hi there,

(1) I am trying to provide some user-friendly guidance in my bokeh app with instructions like ‘Select this… then select that… etc.’. This kind of text is ‘over and above’ the title I have for individual widgets.

Here’s a screenshot:

As you can see, I use title of widget to indicate Base and Ref env, but I would like to add some simple guidance to the user as to what is expected from him/her. My app has many widgets and it will be helpful if i am able to provide these sort of guidance to avoid confusion for them.

I tried using Paragraph widget but I am unable to assign any font color/size/bold to this. Is there a way to do this? I also feel Paragraph is not the natural solution for these kind of simple text instructions. Are there some other alternatives?

(2) I am also using Paragraph (with no text) as the option to insert space between widgets. Is there a better way (should be!) to have space before and after a widget? e.g. before Select, Multiselect & Plot widgets. I am seeing posts only on how to remove spaces but not on how to create space or have padding.


See the Div model in the bokeh reference document, which includes an example of HTML formatting of the text.

Regarding layout flexibility, individual widgets typically have a margin property - a 4-tuple of spacing. The elements, in order, are top, right, bottom, left, spacing around the widget.

There is also a Spacer model that can handle this naturally in row, column, or grid layouts. Which of these solutions makes the most sense really depends on your use cases and/or preferences.

1 Like

@_jm Thank you! I had seen links pointing to Div but I was hoping to find easier alternatives (as I am not quite comfortable with html/css yet). However, i took help from my colleague and figured out a way to get Div do the trick for us. The margin option also worked. Thanks for your prompt response. Appreciate it!