Bad z-order and background color for MultiChoice widget dropdown

[TheoMathurin]

ALL software version info

Panel 0.11.2
Bokeh 2.3.1
Browser: Firefox 87.0 or Chromium 89.0
OS: Ubuntu or RedHat

Description of expected behavior and the observed behavior

When the list of options of a MultiChoice widget is displayed, it appears beneath other widgets and not over them, leading to serious readability issues. I think this happens with all default css templates.

Also, as explained in this Discourse issue, when using FastTemplates the dropown list component of MultiChoice is transparent. In this case changing the z-order would not be sufficient. The corresponding color is set in fast_bokeh.css, line 1315 and could instead be set to the theme background color (#F7F7F7).

NB: the same is true of AutocompleteInput.

Complete, minimal, self-contained example code that reproduces the issue

import panel as pn
import numpy as np

template = pn.template.FastListTemplate(title='FastListTemplate')

xs = np.linspace(0, np.pi)
freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)

template.sidebar.append(pn.widgets.MultiChoice(name='Transparent MultiChoice dropdown',
                                               options=[f'Option {i}' for i in range(5)]))
template.sidebar.append(freq)
template.sidebar.append(phase)

template.servable();

Screenshots or screencasts of the bug in action

[MarcSkovMadsen]

Which version of Bokeh are you using @TheoMathurin ?

[TheoMathurin]

Sorry, updated my post. Note that I had the same problem with Bokeh 2.3.0 and 2.2.3.

[Stubatiger]

Im experiencing similar problems with bokeh 2.3.0 and panel 0.11.3

Im using this minimal code

import panel as pn

# init panel
pn.config.sizing_mode = "stretch_width"

template = pn.template.BootstrapTemplate()

pn.config.raw_css  = [
    """
    .bk.panel-widget-box {
        overflow: visible
    }
    .bk-root {
        z-index: initial
    }
    """
]

in_widget_box = pn.Column(
    pn.WidgetBox(
        pn.widgets.MultiChoice(
            name="Choices 1",
            options=[f"Option {i}" for i in range(5)],
            button_type="success",
        ),
        pn.widgets.MultiChoice(
            name="Choices 2",
            options=[f"Option {i}" for i in range(5)],
            button_type="success",
        ),
        pn.widgets.MultiChoice(
            name="Choices 3",
            options=[f"Option {i}" for i in range(5)],
            button_type="success",
        ),
    )
)
no_widget_box = pn.Column(
        pn.widgets.MultiChoice(
            name="Choices 1",
            options=[f"Option {i}" for i in range(5)],
            button_type="success",
        ),
        pn.widgets.MultiChoice(
            name="Choices 2",
            options=[f"Option {i}" for i in range(5)],
            button_type="success",
        ),
        pn.widgets.MultiChoice(
            name="Choices 3",
            options=[f"Option {i}" for i in range(5)],
            button_type="success",
        ),
        pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
)

template.sidebar.append(in_widget_box)
template.sidebar.append(no_widget_box)


template.servable()

If i try to use the choices inside the widget box this happens:

bug_example.mp4

As one can see, the select options does not extend over the widgetbox, i can fix it by setting

pn.config.raw_css  = [
    """
    .bk.panel-widget-box {
        overflow: visible
    }
    """
]

which produces this

fix_widget_box.mp4

but now the overflowing content is somehow transparent, i suppose there is some z-index magic happening.

I tried around and it appears that setting this fixes it:

pn.config.raw_css  = [
    """
    .bk.panel-widget-box {
        overflow: visible
    }
    .bk-root {
        z-index: initial
    }
    """
]

as one can see here:

fixed_z_order.mp4

But i have no idea which implications those css rules have, or if there are any reasons why the z-index of bk-root is set to 0 in the beginning.

These css-rules does not fix the same for the fast list template though, as one can see here:

fastlist_example.mp4

[TheoMathurin]

I noticed this phenomenon with widgetboxes, and it's worth mentioning that this happens whether or not you're using a template (even serving a plain WidgetBox will cause the issue). This led me to avoid widgetboxes altogether.

Note that in the main section of FastTemplates, this also happens with other containers such as Columns: the dropdown list does not extend beyond the limits of the widget's parent. See below:

[TheoMathurin]

Hi @MarcSkovMadsen

Do you have an idea when these problems could be fixed? Not being able to use the MultiChoice widget correctly in FastTemplates is quite annoying.

Thanks in advance

[philippjfr]

Hey, sorry for not replying earlier. Sounds like this occurs only in specific templates, currently Bootstrap and Fast or is it in other cases as well. The MultiChoice widget is implemented in bokeh so the question is whether this can be fixed there or whether we have to fix the CSS per template.

[Stubatiger]

Sadly i have no skills in css/js, but i assume it has something to do with the absolute positioning.

With this code here:

from bokeh.io import show
from bokeh.models import CustomJS, MultiChoice
import panel as pn

OPTIONS = ["foo", "bar", "baz", "quux"]

multi_choice = MultiChoice(value=["foo", "baz"], options=OPTIONS)
multi_choice.js_on_change("value", CustomJS(code="""
    console.log('multi_choice: value=' + this.value, this.toString())
"""))

pn.Column(
    pn.WidgetBox(
        "# Choices are hidden :(",
        multi_choice
    ),
).show()

the options of the bokeh selection are not shown.

Panel.Application.-.Google.Chrome.2021-05-31.14-09-59.mp4

If i disable the absolute position of the panel widget box, the selection options are shown again.

Panel.Application.-.Google.Chrome.2021-05-31.14-11-47.mp4

So not really sure if thats a bokeh thing or a panel thing, but im suspicious of the absolute positiong although z-ordering is dark magic anyway for me..

[TheoMathurin]

It seems that the bottom line is that there is an issue regarding MultiChoice in WidgetBox regardless of the template. It works fine in Bokeh, however note that WidgetBox is deprecated and will be removed in Bokeh 3.0.

Then additional problems arise with FastTemplates for MultiChoice in other containers such as Column, and the issue with transparency and z-order of the dropdown list.

[TheoMathurin]

Hi @MarcSkovMadsen

Do you think it would be easy to come up with a fix for this? The workaround you proposed in #2434 does not cover all situations (it may not be practical/possible to put all adjacent widgets in the same Column).

As it stands, users have a very poor experience using AutoCompleteInput or MultiChoice in all proposed templates.

[MarcSkovMadsen]

Thanks for reaching out. Will take a look tomorow

[MarcSkovMadsen]

The problem initially reported can be solved by added the following css. It's solves the specific problem by adding z-index 200 to the first widget inserted into the sidebar.

How to generalize that I unfortunately don't know.

import panel as pn
import numpy as np

pn.config.raw_css  = [
"""
.sidenav .bk-root:nth-of-type(1) {
    z-index: 200
}
div.choices__list.choices__list--dropdown.is-active > div {
    background: var(--background-color);
}
"""
]

template = pn.template.FastListTemplate(title='FastListTemplate')

xs = np.linspace(0, np.pi)
freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)

template.sidebar.append(pn.widgets.MultiChoice(name='Transparent MultiChoice dropdown',
                                               options=[f'Option {i}' for i in range(5)]))
template.sidebar.append(freq)
template.sidebar.append(phase)

template.servable()

@TheoMathurin

[TheoMathurin]

Many thanks @MarcSkovMadsen!

It solves the issue for my MultiChoice widget in the sidebar.

In my case I also have a MultiChoice in the main content area, with the dropdown not extending beyond the card:

But at least now with the background change, when the dropdown unfolds below and not above the widget I can see the options.

I hope a more comprehensive fix will come at some point.

[CmpCtrl]

One other note to add, in the FastListTemplate with the dark theme, the font color for entry is also dark, and the hover background is transparent. Note that in the screenshot i already used @MarcSkovMadsen's css fix for the dropdown background color.

Here's the updated css i used to fix these.

.bk-root .choices__item.choices__item--choice.choices__item--selectable.is-highlighted {
    background: var(--neutral-fill-hover)
}
.bk-root .choices__input {
    color:var(--neutral-foreground-rest);
}
div.choices__list.choices__list--dropdown.is-active > div {
    background: var(--background-color);
}

[philippjfr]

Appears to be fixed on main (with bokeh 3.1.0dev3).