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

[IndexTable] Scrollbar doesn't appear until window is resized #11782

Open
thelaughing-man opened this issue Mar 25, 2024 · 4 comments
Open

[IndexTable] Scrollbar doesn't appear until window is resized #11782

thelaughing-man opened this issue Mar 25, 2024 · 4 comments
Labels
Bug Something is broken and not working as intended in the system. untriaged

Comments

@thelaughing-man
Copy link

Summary

This issue (#7307) still occurs when an IndexTable is included in a ui-modal.

Expected behavior

The horizontal scrollbar should render allowing scrolling on larger IndexTables

Actual behavior

The scrollbar does not appear until the page is reasized just as in ticket (#7307).

The IndexTable loads with a hidden scrollbar with calss Polaris-IndexTable-scrollBarContainerHidden

Screenshot 2024-03-25 115828

After resizing the page, it vanishes

Screenshot 2024-03-25 115854

Steps to reproduce

Link to sandbox

  1. Sandbox does not support modals

Are you using React components?

Yes

Polaris version number

5.10.2

Browser

Chrome 122.0.6261.113

Device

Dell Laptop

@thelaughing-man thelaughing-man added Bug Something is broken and not working as intended in the system. untriaged labels Mar 25, 2024
@thelaughing-man
Copy link
Author

I take it back. It's happening on IndexTables not in a modal as well. I'll try to recreate in the Polaris tester.

@sixkin-stephens
Copy link

sixkin-stephens commented May 27, 2024

I'm getting this too. I have an IndexTable in a Page (not in a Modal). When the rows are wide enough to require the horizontal scrollbar, the scrollbar doesn't appear initially.

Resizing the browser, or changing the IndexTable's IndexFilter tab causes the scrollbar to appear.

"@shopify/polaris": "^13.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",`

@zgqallan
Copy link

Hi, how is it going? I am having this issue two.

@Zetxus
Copy link

Zetxus commented Oct 10, 2024

Also having this issue. Happens to me whenever I've already created the table and add data to it so it becomes wider.

Super inefficient workaround for the above case: whenever I change the data, I change the key attribute of the IndexTable as well - this forces the table to re-render and the scroll is properly sized.

Would appreciate a fix on this though, this gets annoying with big tables.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something is broken and not working as intended in the system. untriaged
Projects
None yet
Development

No branches or pull requests

4 participants