Contrib.social

Wide CKEditor toolbar breaks layout grid

Open on Drupal.org →
Created on 23 December 2024, about 1 year ago

Problem/Motivation

I'm developing a site using a subtheme of bootstrap_sass, and I noticed that certain nodes were not staying within their content regions. Specifically, I was using "sidebar left" for menus etc., and the remaining width was for the "content" region. Most nodes on the site would work correctly - at the top of the page you'd see the menu in the sidebar and the node content taking up 3/4 of the screen to the right of the sidebar. But some nodes would have the node content appear entirely below the last of the sidebar's content.

I tried to debug by working out what custom CSS I needed to add to fix the layout, and realised there was more than one cause.

So I've set out to try and reproduce this on a minimal installation

Steps to reproduce

  1. Install a brand new installation of Drupal 11.1.0 (the latest release at the time of opening this bug report). Use the standard installation.
  2. Download Bootstrap Barrio. Enable the themes bootstrap_barrio and bootstrap_barrio_subtheme. Set the subtheme to be the current default theme.
  3. Go to Content Types. Find Basic Page. Manage Fields. Add comments to the field list.
  4. Go to Text Formats and Editors. Edit "Full HTML". Add lots of other buttons to the CKEditor toolbar, so there is more than will fit on the width of the page.
  5. Create a node of type Basic Page. Fill it with some sample text.
  6. Go to the Block Layout screen, and place any block in Sidebar Left. The user menu will do.
  7. Go to view the newly created node. It should be laid out correctly, menu on the left in the sidebar, with the "Add New Comment" form below it.
  8. Now change the text format of the comment editor to "Full HTML".
  9. The layout pops - the comment form and the node both become full screen width, and move to below the sidebar.

Before

After

Second reproduction

  1. I also noticed that pages with images can cause the same problem regardless of the comment toolbar
  2. Add an attachment field to Basic Page. Allow .jpg images.
  3. Edit the node created before. Upload a .jpg image that's least 1920px wide.
  4. Change the content type of the body to Full HTML. Edit the source to insert the image using an img tag.
  5. Save the edited post.

Even without changing the input format of the "new comment" form, the page doesn't format correctly.

Clearly, oversized images need handling somehow. But however they are handled, they shouldn't break the region formatting of the theme.

🐛 Bug report
Status

Active

Version

5.5

Component

Code

Created by

🇬🇧United Kingdom jamesoakley North Yorkshire, UK

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jamesoakley
  • Comment about 1 year ago →
    🇮🇳India ravi kant Jaipur

    @jamesoakley
    The issue is not generating for me.
    Attaching screenshots.

  • Comment about 1 year ago →
    🇬🇧United Kingdom jamesoakley North Yorkshire, UK

    @ravi - you missed

    4.

    Go to Text Formats and Editors. Edit "Full HTML". Add lots of other buttons to the CKEditor toolbar, so there is more than will fit on the width of the page.
  • Status changed to Closed: works as designed 2 months ago
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024