This problem occurs if content is added to a Layout builder and that content includes an element styled with a fixed width wider than the width of the column.
The column will assume the width of the wider child element, breaking the column layout.
This was discovered (and easy to reproduce) with the comment block, but this issue will happen with any content styled wider than the column width.
How this was discovered:
Steps to reproduce (also see youtube recording )
- Vanilla Drupal 8 (I used simplytest.me to verify)
- Activate Layout Builder module
- Activate Layout Builder on Article
- Modify Layout with two columns with body left and comments to the right
- Enter a artice (the comment form shows underneath instead beside)
- Enter comments
- Save
The comments appear below the body instead of to the right
Most likely resolution: Add Javascript that detects if a column includes a fixed width element that would cause the column to break to another line. In these cases, the columns should still break to another line, but their width should also be set to 100% (essentially the same behavior as what would take place at narrower screen widths, as the layouts are responsive)
Possible alternative: Add Y-scrolling to columns that would otherwise break to another line. This couuld
Approach that was discussed that will most likely not be used: setting the columns to overflow: hidden would also address the symptoms, but was considered a nonviable solution as it could potentially limit access to important content or inputs.
Get feedback on solution, ideally from real-world users.
N/A
N/A
N/A
N/A
Needs work
11.0 🔥
Last updated
Blocks and Layouts Initiative. See the #2811175 Add layouts to Drupal issue.
Makes Drupal easier to use. Preferred over UX, D7UX, etc.
A documentation change is requested elsewhere. For Drupal core (and possibly other projects), once the change has been committed, this status should be recorded in a change record node.
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
I have attached patch for 11.x. I have fixed the test failures. Not adding the interdiff as patch #67 doesn't apply anymore.