Adding style to select dropdown options

Hi,

Is there a way to add styles to the dropdown options?

Something like text ?

Seems like right now everything is escaped and displayed as plain text.

Is there a way to add styles to the options?

Hongyi

I find a temporary workaround. It’s kind of ugly. But still I wanna share, in case somebody else is looking into this.

Basically, I hard coded the styles of each option into css using nth-child() trick. It is not dynamic but for my purpose it’s fine.

Then in server code, I attached the designated class to the Select widget.

Finally made a CustomJS to simply update the css style of the selection and attached this callback to my Select widget.

During this process I realized that it would be great if we can create CustomJS callbacks and attach them to page load event. It seems like it is a lot of work to attach a JS function to page load.

···

On Tuesday, December 4, 2018 at 2:27:35 PM UTC-5, Hongyi Xin wrote:

Hi,

Is there a way to add styles to the dropdown options?

Something like text ?

Seems like right now everything is escaped and displayed as plain text.

Is there a way to add styles to the options?

Hongyi

Hi,

There is an open issue for a callback on start (for some definition of start) you can watch:

  Hook for callback upon document init · Issue #4272 · bokeh/bokeh · GitHub

Unfortunately we've not had the time/resources to get to it yet.

Thanks,

Bryan

···

On Dec 6, 2018, at 02:00, Hongyi Xin <[email protected]> wrote:

I find a temporary workaround. It's kind of ugly. But still I wanna share, in case somebody else is looking into this.

Basically, I hard coded the styles of each option into css using nth-child() trick. It is not dynamic but for my purpose it's fine.

Then in server code, I attached the designated class to the Select widget.

Finally made a CustomJS to simply update the css style of the selection and attached this callback to my Select widget.

During this process I realized that it would be great if we can create CustomJS callbacks and attach them to page load event. It seems like it is a lot of work to attach a JS function to page load.

On Tuesday, December 4, 2018 at 2:27:35 PM UTC-5, Hongyi Xin wrote:
Hi,

Is there a way to add styles to the dropdown options?

Something like <font color="#3128bd"> text </font>?

Seems like right now everything is escaped and displayed as plain text.

Is there a way to add styles to the options?

Hongyi

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/2b357933-be51-4149-b6b9-062e9fdccfe7%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

i too would like to style each element in a Select options list differently. specifically with different colors. and it needs to be able to be dynamically changed. i tried adding HTML to the text string (e.g. “<b>option #1</b>” to make it bold) but it didn’t work. i don’t think hard coding CSS would work for me as i need to change the colors with ColorPicker in response to user input. thanks!