MultiSelect does not draw its select boxes over other content

Panel
1

This is a really critical issue, was this observed by any-body else? Also
user-level hacks are appreciated, can I somehow make sure a widget is
rendered above all other content?

The multi-select pop-up box will be hidden below other content, and
then the user cannot properly see what they select.

2

I have already filed a Github issue, but maybe here I can get some pragmatic advice
what to do :slight_smile: All help is appreciated.

3

Hi

I can not reproduce your cases. If you could post your code, it would be better for me to reproduce it.

import panel as pn
pn.extension('tabulator')
import numpy as np
import pandas as pd
import datetime as dt
df = pd.DataFrame({
    'int': [1, 2, 3],
    'float': [3.14, 6.28, 9.42],
    'str': ['A', 'B', 'C'],
    'bool': [True, False, True],
    'date': [dt.date(2019, 1, 1), dt.date(2020, 1, 1), dt.date(2020, 1, 10)],
    'datetime': [dt.datetime(2019, 1, 1, 10), dt.datetime(2020, 1, 1, 12), dt.datetime(2020, 1, 10, 13)]
}, index=[1, 2, 3])
multi_choice = pn.widgets.MultiChoice(name='MultiSelect', value=['Apple', 'Pear'],
    options=['Apple', 'Banana', 'Pear', 'Strawberry'])
df_widget = pn.widgets.Tabulator(df, buttons={'Print': "<i class='fa fa-print'></i>"})

pn.Column(multi_choice, df_widget,height = 500).show()

image

Kind regards
Victor

4

Specifically this happens when we have a column
of 4 widget boxes, where each widget box contains 1-4
MultiSelect widgets. Then MultiSelect widgets whose pop-ups
intersect the boundary of the widget boxes, they will
not be rendered outside of their own widget box in which
they are contained.

So in pseudo-code

Pn.Column(PnWidgetBox(ms1, ms2, ms3), … PnWidgetBox(ms_k, ms_{k+1}))

5

Pn.Column is in fact an Accordion in the specific case.

6

Hi mhueser

yes, When i use widget box or give a column a css_classes, it pops up manual issue is happen.

For a solution, try this
Try this:

import panel as pn
pn.extension('tabulator',comms = 'vscode')
import numpy as np
import pandas as pd
import datetime as dt
import param
from panel.reactive import ReactiveHTML, Viewable

df = pd.DataFrame({
    'int': [1, 2, 3],
    'float': [3.14, 6.28, 9.42],
    'str': ['A', 'B', 'C'],
    'bool': [True, False, True],
    'date': [dt.date(2019, 1, 1), dt.date(2020, 1, 1), dt.date(2020, 1, 10)],
    'datetime': [dt.datetime(2019, 1, 1, 10), dt.datetime(2020, 1, 1, 12), dt.datetime(2020, 1, 10, 13)]
}, index=[1, 2, 3])
multi_choice = pn.widgets.MultiChoice(name='MultiSelect', value=['Apple', 'Pear'],
    options=['Apple', 'Banana', 'Pear', 'Strawberry'])
df_widget = pn.widgets.Tabulator(df)


class HTML_WidgetBox(ReactiveHTML):
    object = param.ClassSelector(class_=Viewable)
    _template = """

    <div id="clickable" style="border-radius:5px; border:1px black solid;" >
    ${object}
    </div>
    """
    def __init__(self, object, **params):
        super().__init__(object=object, **params)
pn.Column(
    HTML_WidgetBox(multi_choice),
    pn.WidgetBox(df_widget, width=800, height=500),
    height = 500).show()

image
image818×620 7.17 KB

Kind regards
Victor

1 Like
7

So the solution is to wrap every MultiSelect with such a
container? It’s doable, but I just wanted to make I got
right the solution.

8

The fix is even simpler, I just hadn’t realized, if one replaces WidgetBox by Col, the problem disappears
also.

9

Yes. But if you apply the border to the column, the same issue will appear again. If you would like a border, the html container is one of the solution