Table row whitespace growing, becoming unnecessarily large #3878

Closed
opened 2026-02-05 07:44:59 +03:00 by OVERLORD · 7 comments
Owner

Originally created by @FMCUSystemAdmins on GitHub (Jun 22, 2023).

Attempted Debugging

  • I have read the debugging page

Searched GitHub Issues

  • I have searched GitHub for the issue.

Describe the Scenario

We've been having an issue with whitespace growing as we add new rows and adjust existing rows/content within the table. The result ends up being that the rows have an unnecessary amount of whitespace. See attached for example (it is zoomed out to capture extent of whitespace growth).

whitespace example

We've tried editing the source of the table to put HTML tags for auto-sizing and such, but it doesn't have any effect. Manually adjusting each row to collapse the whitespace doesn't work, because the second we do that for subsequent rows, the previous ones start growing.

Any suggestions?

Exact BookStack Version

23.05

Log Content

No response

PHP Version

No response

Hosting Environment

CentOS 7

Originally created by @FMCUSystemAdmins on GitHub (Jun 22, 2023). ### Attempted Debugging - [X] I have read the debugging page ### Searched GitHub Issues - [X] I have searched GitHub for the issue. ### Describe the Scenario We've been having an issue with whitespace growing as we add new rows and adjust existing rows/content within the table. The result ends up being that the rows have an unnecessary amount of whitespace. See attached for example (it is zoomed out to capture extent of whitespace growth). ![whitespace example](https://github.com/BookStackApp/BookStack/assets/50454265/47fcf083-ae10-4d17-87b1-33e0710c3e73) We've tried editing the source of the table to put HTML tags for auto-sizing and such, but it doesn't have any effect. Manually adjusting each row to collapse the whitespace doesn't work, because the second we do that for subsequent rows, the previous ones start growing. Any suggestions? ### Exact BookStack Version 23.05 ### Log Content _No response_ ### PHP Version _No response_ ### Hosting Environment CentOS 7
OVERLORD added the 🐛 Bug📝 WYSIWYG Editor💻 Front-End labels 2026-02-05 07:44:59 +03:00
Author
Owner

@ssddanbrown commented on GitHub (Jun 22, 2023):

@FMCUSystemAdmins Please can you confirm the browser in which this occurs in, and the operating system for which that browser is running upon.

Also, please can you confirm if this is reproducible on our demo site:
https://demo.bookstackapp.com/books/bookstack-demo-site/page/logging-in-to-the-demo-site

@ssddanbrown commented on GitHub (Jun 22, 2023): @FMCUSystemAdmins Please can you confirm the browser in which this occurs in, and the operating system for which that browser is running upon. Also, please can you confirm if this is reproducible on our demo site: https://demo.bookstackapp.com/books/bookstack-demo-site/page/logging-in-to-the-demo-site
Author
Owner

@FMCUSystemAdmins commented on GitHub (Jun 23, 2023):

@ssddanbrown This is happening in Firefox v102.11.0esr on Windows 10 v22H2. It doesn't happen in either Chrome or Edge. I can't reproduce it on the demo site.

@FMCUSystemAdmins commented on GitHub (Jun 23, 2023): @ssddanbrown This is happening in Firefox v102.11.0esr on Windows 10 v22H2. It doesn't happen in either Chrome or Edge. I can't reproduce it on the demo site.
Author
Owner

@ssddanbrown commented on GitHub (Jun 24, 2023):

Thanks @FMCUSystemAdmins.

I can't reproduce it on the demo site.

Ah, okay, might make it hard to test and fix if we can't reproduce in other environments.

Can you confirm exactly when and how the growth occurs?:

  • Is it live within the editor?
  • Or do you have to close and re-open the editor?
  • If in editor:
    • Is it upon any interaction?
    • Does it keep growing without interaction?
    • Is it staggered?

Also, is this reproducible via inserting a new table? If so, what are the exact steps there?

@ssddanbrown commented on GitHub (Jun 24, 2023): Thanks @FMCUSystemAdmins. > I can't reproduce it on the demo site. Ah, okay, might make it hard to test and fix if we can't reproduce in other environments. Can you confirm exactly when and how the growth occurs?: - Is it live within the editor? - Or do you have to close and re-open the editor? - If in editor: - Is it upon any interaction? - Does it keep growing without interaction? - Is it staggered? Also, is this reproducible via inserting a new table? If so, what are the exact steps there?
Author
Owner

@FMCUSystemAdmins commented on GitHub (Jun 27, 2023):

@ssddanbrown:

  • Is it live within the editor? Yes, it's when we're adjusting row heights within the editor. For example, going top-down in the table, if we adjust the first row, then move to the second row, the first row grows itself by a little bit. This behavior happens for every subsequent row that gets adjusted and continues to happen for prior rows.
  • Or do you have to close and re-open the editor? Closing and re-opening the editor does not cause the growth by itself.
  • If in editor:
    • Is it upon any interaction? Not any interaction, just adjusting the row heights. This can be via manually dragging the row adjustment or double-clicking it to attempt to auto-size it.
    • Does it keep growing without interaction? Doesn't seem so.
    • Is it staggered? I'm assuming you mean every other row? If so, then no.

Is this reproducible via inserting a new table? If so, what are the exact steps there? Running through this has shown that it seems to be related to having an ordered list within the table. Here are the steps I did:

1. Create new table with multiple rows
2. Add content to include an ordered list
3. Attempt readjusting row height of row containing the ordered list by double clicking to auto-size. This is the easiest method to see the behavior.

This behavior seems to only be present when using Firefox.

@FMCUSystemAdmins commented on GitHub (Jun 27, 2023): @ssddanbrown: - Is it live within the editor? **Yes, it's when we're adjusting row heights within the editor. For example, going top-down in the table, if we adjust the first row, then move to the second row, the first row grows itself by a little bit. This behavior happens for every subsequent row that gets adjusted and continues to happen for prior rows.** - Or do you have to close and re-open the editor? **Closing and re-opening the editor does not cause the growth by itself.** - If in editor: - Is it upon any interaction? **Not any interaction, just adjusting the row heights. This can be via manually dragging the row adjustment or double-clicking it to attempt to auto-size it.** - Does it keep growing without interaction? **Doesn't seem so.** - Is it staggered? **I'm assuming you mean every other row? If so, then no.** Is this reproducible via inserting a new table? If so, what are the exact steps there? **Running through this has shown that it seems to be related to having an _ordered list within the table_. Here are the steps I did:** **1. Create new table with multiple rows 2. Add content to include an ordered list 3. Attempt readjusting row height of row containing the ordered list by double clicking to auto-size. This is the easiest method to see the behavior.** This behavior seems to only be present when using Firefox.
Author
Owner

@ssddanbrown commented on GitHub (Jun 29, 2023):

Thanks for providing the detailed information @FMCUSystemAdmins.
That really helped me reproduce what I believe is the same issue.

I traced this down to this bug (or at least non-now-standard behaviour) in Firefox, which would mess with how cell heights would be set and recalculated on any height affecting change.

I've applied a patch in 5ea2d0c57b, which will be part of the next feature release which I'm aiming to release by the end of the month.

Alternatively, adding this to the "Custom HTML Head Content" customization setting will effectively allow patching the change on existing BookStack versions if needed:

<style>
table td, table th { vertical-align: top; }
</style>

If the workaround, or changes in the next release, do not address this let me know and I can re-open this.

@ssddanbrown commented on GitHub (Jun 29, 2023): Thanks for providing the detailed information @FMCUSystemAdmins. That really helped me reproduce what I believe is the same issue. I traced this down [to this bug](https://bugzilla.mozilla.org/show_bug.cgi?id=569645) (or at least non-now-standard behaviour) in Firefox, which would mess with how cell heights would be set and recalculated on any height affecting change. I've applied a patch in 5ea2d0c57bb0fea66b33201de884d000a2e92731, which will be part of the next feature release which I'm aiming to release by the end of the month. Alternatively, adding this to the "Custom HTML Head Content" customization setting will effectively allow patching the change on existing BookStack versions if needed: ```html <style> table td, table th { vertical-align: top; } </style> ``` If the workaround, or changes in the next release, do not address this let me know and I can re-open this.
Author
Owner

@FMCUSystemAdmins commented on GitHub (Jun 30, 2023):

@ssddanbrown, happy to help! The custom code works like a charm, thank you!

We'll ensure all is well after applying patch.

@FMCUSystemAdmins commented on GitHub (Jun 30, 2023): @ssddanbrown, happy to help! The custom code works like a charm, thank you! We'll ensure all is well after applying patch.
Author
Owner

@FMCUSystemAdmins commented on GitHub (Jul 11, 2023):

@ssddanbrown, just following up since we updated to v23.06.1 and removed the custom HTML header. The behavior has not returned, so seems like the patch is solid. Thanks again!

@FMCUSystemAdmins commented on GitHub (Jul 11, 2023): @ssddanbrown, just following up since we updated to v23.06.1 and removed the custom HTML header. The behavior has not returned, so seems like the patch is solid. Thanks again!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#3878