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.

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

Wide tables should scroll horizontally within the page #998

Closed
simonw opened this issue Oct 8, 2020 · 8 comments
Closed

Wide tables should scroll horizontally within the page #998

simonw opened this issue Oct 8, 2020 · 8 comments

Comments

@simonw
Copy link
Owner

simonw commented Oct 8, 2020

Wrap the main table in <div style="overflow-x: auto">

@simonw
Copy link
Owner Author

simonw commented Oct 8, 2020

I tried this out and it did cause one problem with plugins: datasette-cluster-map still injected itself inside the scrolling area, when instead we would want that map to stay outside of the div with the table in it.

@simonw
Copy link
Owner Author

simonw commented Oct 8, 2020

So maybe this is blocked on #987 and adding a new hook in the HTML which plugins like datasette-cluster-map can attach their content to.

@simonw
Copy link
Owner Author

simonw commented Oct 21, 2020

This may require updates to the column action menu JavaScript too, since it was not built with scrolling sideways in mind.

@simonw
Copy link
Owner Author

simonw commented Oct 22, 2020

Easiest fix for the column action menu positioning - hide them when the user scrolls the containing div:

document.querySelector('.table-wrapper').addEventListener(
  'scroll', () => document.querySelector('.dropdown-menu').style.display = 'none'
);                                            

@simonw
Copy link
Owner Author

simonw commented Oct 22, 2020

This isn't blocked on #987 - it just means that datasette-cluster-map will need to learn to look for .table-wrapper first and fall back on the table.

simonw added a commit to simonw/datasette-cluster-map that referenced this issue Oct 22, 2020
@simonw
Copy link
Owner Author

simonw commented Oct 22, 2020

Demo:
table-scroll

@simonw simonw closed this as completed Oct 22, 2020
simonw added a commit to simonw/datasette-cluster-map that referenced this issue Oct 22, 2020
simonw added a commit to simonw/global-power-plants-datasette that referenced this issue Oct 22, 2020
@simonw
Copy link
Owner Author

simonw commented Oct 22, 2020

@JBPressac
Copy link
Contributor

Hello Simon,
I have a similar problem with horizontal scrollbar display with Datasette version 0.51 and superior for a table with more than 30 rows. With Datasette 0.50, the horizontal scrollbar is displayed, if I upgrade Datasette to 0.51 and superior, the horizontal scrollbar disappears.

Datasette 0.50: horizontal scrollbar

2020-12-11 10_23_28-CN=Microsoft Windows, O=Microsoft Corporation, L=Redmond, S=Washington, C=US

Datasette 0.51 and superior: no horizontal scrollbar

2020-12-11 10_24_55-CN=Microsoft Windows, O=Microsoft Corporation, L=Redmond, S=Washington, C=US

Thanks,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants