panel Tabulator list editor inside a template / jupyter lab will not stay fixed to the cell

Tabulator list editor inside a template / jupyter lab will not stay fixed to the cell.

ALL software version info

(this library, plus any other relevant software, e.g. bokeh, python, notebook, OS, browser, etc should be added within the dropdown below.)

Software Version Info

panel 1.5.0

Description of expected behavior and the observed behavior

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

import pandas as pd
import panel as pn

pn.extension("tabulator")  # works
# pn.extension("tabulator", template="bootstrap")  # does not work

tabulator_editors = {"0": {"type": "list", "values": list(range(100))}}
df = pd.DataFrame(range(30))
pn.widgets.Tabulator(df, editors=tabulator_editors).servable()

Stack traceback and/or browser JavaScript console output

Screenshots or screencasts of the bug in action

https://github.com/user-attachments/assets/b14af974-9152-4a21-a45e-db8282ec2c02

Sep 18 '24 15:09 hoxbro

An example without a template:

import pandas as pd
import panel as pn

pn.extension("tabulator")

tabulator_editors = {"0": {"type": "list", "values": list(range(100))}}
df = pd.DataFrame(range(30))
tab = pn.widgets.Tabulator(df, editors=tabulator_editors)

pn.Column(tab, max_height=400, styles={"overflow-y": "auto"}).servable()

Sep 19 '24 09:09 hoxbro

I can recreate it this without Panel:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tabulator with List Editor</title>

    <link
      href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
  </head>
  <body>
    <div id="example-container" style="height: 200px; overflow-y: auto">
      <div id="example-table" style="width: 200px"></div>
    </div>

    <script>
      let tableData = []
      for (let i = 0; i < 30; i++) {
        tableData.push({ no: i })
      }

      let values = []
      for (let i = 0; i < 30; i++) {
        values.push(i)
      }

      const table = new Tabulator("#example-table", {
        data: tableData,
        columns: [
          {
            title: "No",
            field: "no",
            editor: "list",
            editorParams: { values: values, multiselect: false },
          },
        ],
      })
    </script>
  </body>
</html>

Sep 19 '24 11:09 hoxbro

The editor popup is attached to the body by default, I think that can be changed. Will try it out.

Sep 19 '24 13:09 philippjfr