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

Resizable Table has "layout flash" #247

Open
mw10013 opened this issue Dec 9, 2024 · 2 comments
Open

Resizable Table has "layout flash" #247

mw10013 opened this issue Dec 9, 2024 · 2 comments

Comments

@mw10013
Copy link

mw10013 commented Dec 9, 2024

Describe the bug
A clear and concise description of what the bug is.

A resizable table seems to have a "layout flash" on initial render and refresh if the width of the table is wider than the minimum widths of all its columns.

To Reproduce
Steps to reproduce the behavior:

  1. Render the example code for Resizable (https://getjustd.com/docs/components/collections/table#resizable) in a web page that is wide enough so that the table is wider than the minimum widths of all its columns.
  2. Initial render has "layout flash"
  3. Refreshing page results in :layout flash"

Stackblitz repro: https://stackblitz.com/~/github.com/mw10013/rr-justd-sandbox?file=app/lib/components/resizable-table.tsx

NB: Ensure the preview pane for the web page in StackBlitz is wider than the minimum widths of all the columns in the resizable table.

Expected behavior
A clear and concise description of what you expected to happen.

There should be no "layout flash"

Screenshots
If applicable, add screenshots to help explain your problem.

Stackblitz repro: https://stackblitz.com/~/github.com/mw10013/rr-justd-sandbox?file=app/lib/components/resizable-table.tsx

Desktop (please complete the following information):

  • Browser [e.g. chrome, safari]: chrome

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

@irsyadadl
Copy link
Owner

It'll update later on #243 , for now, the flash won't gone, but at least, you can add min-w-full to the root style on Table.tsx.

const table = tv({
  slots: {
    root: "table min-w-full

@mw10013
Copy link
Author

mw10013 commented Dec 10, 2024

Submitted issue upstream: adobe/react-spectrum#7499

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

No branches or pull requests

2 participants