search

holoviz / panel

Panel: The powerful data exploration & web app framework for Python
https://panel.holoviz.org
BSD 3-Clause "New" or "Revised" License
4.64k stars 504 forks source link

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

Open hoxbro opened 1 day ago

hoxbro commented 1 day ago

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 ```plaintext 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

hoxbro commented 20 hours ago

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()
hoxbro commented 18 hours ago

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/tabulator-tables@6.2.1/dist/css/tabulator.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/tabulator-tables@6.2.1/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>
philippjfr commented 16 hours ago

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