Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
hoxbro opened this issue Sep 18, 2024 · 3 comments · May be fixed by #7299
Open

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

hoxbro opened this issue Sep 18, 2024 · 3 comments · May be fixed by #7299
Labels
component: tabulator Related to the Tabulator widget type: bug Something isn't correct or isn't working

Comments

@hoxbro
Copy link
Member

hoxbro commented Sep 18, 2024

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

Screencast.2024-09-18.17.16.16.mp4
@hoxbro hoxbro added type: bug Something isn't correct or isn't working component: tabulator Related to the Tabulator widget labels Sep 18, 2024
@hoxbro
Copy link
Member Author

hoxbro commented Sep 19, 2024 •
edited
Loading

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
Copy link
Member Author

hoxbro commented Sep 19, 2024

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>

@philippjfr
Copy link
Member

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

@philippjfr philippjfr linked a pull request Sep 19, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: tabulator Related to the Tabulator widget type: bug Something isn't correct or isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Set Tabulator to render into explicit popup container holoviz/panel
2 participants
@philippjfr @hoxbro