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:
image

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.

@Gopi_M

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!