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

[Bug]: <col> element missing min-width (or width) style when column hasn't been resized #5435

Closed
1 task done
Ragnar-Oock opened this issue Aug 2, 2024 · 3 comments · Fixed by #5769 · May be fixed by SanderLeenders/tiptap#1 or kokizzu/tiptap#101
Closed
1 task done
Labels
Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Type: Bug The issue or pullrequest is related to a bug

Comments

@Ragnar-Oock
Copy link
Contributor

Affected Packages

@tiptap/extension-table, @tiptap/extension-table-cell, @tiptap/extension-table-header, @tiptap/extension-table-row

Version(s)

2.5.8

Bug Description

The generated <col> elements don't have a width or min-width set on them unless the corresponding column is manually resized. For columns with wrapping text that can lead to layout jump when other column are resized (you can try resizing an empty column in the repro to provoke it) and columns can end up with a width smaller than the configured cellMinWidth (both in the editor and in the HTML output)

While the "in editor" <col> are controled by prosemirror-table (I will open an issue there and link it to this one later), the output is handled by tiptap and it can easily be fixed by changing this line :

cols.push(['col', cssWidth ? { style: `width: ${cssWidth}` } : {}])

into :

cols.push([
  'col', 
  { style: hasWidth ? `width: ${ hasWidth }px` : `min-width: ${ cellMinWidth }px` }
]);

Browser Used

Firefox

Code Example URL

reproduction

Expected Behavior

The <col> should always have either width or min-width set on them to prevent column from going below the configured minimum width.

Additional Context (Optional)

No response

Dependency Updates

  • Yes, I've updated all my dependencies.
@Ragnar-Oock Ragnar-Oock added Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Type: Bug The issue or pullrequest is related to a bug labels Aug 2, 2024
@github-project-automation github-project-automation bot moved this to Triage open in Tiptap Aug 2, 2024
@Ragnar-Oock
Copy link
Contributor Author

I'm not sure if I should open an other issue for this detail or not but it might be interesting to point out in the doc that table cells <td> and <th> should have both word-break: break-word and width: min-content to avoid layout jumps when resizing columns in table that don't have a width: 100% (like is the case in the above repro or my application)

@nperez0111
Copy link
Contributor

Would be happy to accept a PR for the original issue.

For the second doc recommendation, I think that is out of scope since it is a styling question & there are multiple solutions to it

@nperez0111
Copy link
Contributor

Should be released with 2.10.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Type: Bug The issue or pullrequest is related to a bug
Projects
No open projects
Archived in project
2 participants