Scrolling Prohibited in OJS `Inputs.Table()` When Quarto Dashboard Row Height Is Set

mrworthington commented 1 month ago

Bug description

Whenever row height is explicitly set in a quarto dashboard using Observable's Inputs.table(), it prevents scrolling through the entire contents of a table rendered through Inputs.table(). If row height is not explicitly set, scrolling occurs as expected.

Steps to reproduce

I've put a repo together showing the differences, which lives here: https://github.com/mrworthington/duckdb-in-ojs

The file named index.qmd does not have row height set in the quarto dashboard.
The file named "index_2.qmd" does explicitly set a row height.

Expected behavior

When you render a table with Inputs.table(), it should scroll as contents are called upon. Via the Observable docs:

A Table displays tabular data. It’s fast: rows are rendered lazily on scroll. It sorts: click a header to sort, and click again to reverse. And it selects: click a checkbox on any row, and the selected rows are exported as a view value. (And for searching, see the Search input.) For more applied examples, see Hello, Inputs!

By default, all columns are visible. Only the first dozen rows are initially visible, but you can scroll to see more. Column headers are fixed for readability.

When row height isn't set in a quarto dashboard, it behaves as expected (albeit with a weird cutoff that occurs if the table's expanded).

https://github.com/user-attachments/assets/50f86995-fdb4-4509-8327-0b3560c09e37

Actual behavior

However, when row height is explicitly set in the quarto dashboard, the scrolling is prohibited:

https://github.com/user-attachments/assets/3dcf9b5d-afdd-425d-924d-4aeb6e16a733

Your environment

IDE: RStudio Version 2024.04.0+735 (2024.04.0+735)
Quarto: v 1.6.1 (FWIW, it also occurred on v 1.5)
R: 4.4.1

Quarto check output

Quarto 1.6.1
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.6.1
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.3
      Path: /usr/local/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.4.1
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.4-arm64/Resources/library
      knitr: 1.46
      rmarkdown: 2.27

[✓] Checking Knitr engine render......OK

cscheid commented 1 month ago

Thanks, I can repro. We're not doing anything special with scrolling afaict, so I'm not sure what accounts for the difference.

mrworthington commented 1 month ago

I’ve looked at the CSS and I’m not sure what it is either. 🤔

eamcvey commented 1 month ago

UPDATE: I have since realized that the problem was the default rows setting in Inputs.table. With this change, scrolling works: Inputs.table(all_ojs, { rows: 1000 })

I was having the same problem with lack of scrolling. I tried removing the row height, and still couldn't get it to scroll. I've now stripped things down to a very simple example with generic data and I still don't get a scrollable table. I'm not sure if this helps diagnose the problem at all. I'm using Quarto version 1.4.539 and my dashboard example is here: https://github.com/eamcvey/quarto-ojs-scroll-troubleshooting

wvictor14 commented 1 month ago

I discovered that you can play around with the quarto dashboard yaml options to get scrolling to work

add these parameters to @mrworthington index_2.qmd

  dashboard:
    scrolling: false
    orientation: columns

see this PR (it's the same file but with mentioned changes)

and see that the input.table now is scrollable

https://github.com/user-attachments/assets/7d7623ce-0d50-4927-ad68-574f7dbc62e2

mrworthington commented 1 month ago

@wvictor14: Appreciate the PR and can definitely use that for now. I think my general issue is that the default behavior of scrolling changes based off of setting row height, which I would guess is not the expected or intended behavior for the Quarto team. I could be wrong though.

quarto-dev / quarto-cli