Steps to reproduce:

  1. Enable the CKEditor for the WYSIWYG editor
  2. Enable the Image button for the Full HTML text format
  3. Add an image to a node and set the Align to left/right

Expected behavior:
Image floats right/eft

Observed behavior:
Image doesn't float right/left

Details
The problem symptoms are similar to issue #1111808 but the reason is different. I use the Full HTML text format with CKEditor for the WYSIWYG module. When inserting an image with the Image button, the data-align and other data-* attributes get set correctly. The image in the rendered node is wrapped with a tag that gets the class="align-right" attribute set correctly. The css also correctly specifies it should float:right. The problem is that the figure doesn't get a width attribute, so it is the full width of the parent element and doesn't float right/left. The Image button for CKEditor should also set the width attribute on the figure.

CommentFileSizeAuthor
#8 Screenshot 2020-06-25 08.14.42.png27.56 KBpameeela
#7 Screenshot 2020-06-25 08.14.26.png28.29 KBpameeela
#7 Screenshot 2020-06-25 08.14.26.png28.29 KBpameeela
screenshot image alignment problem.png198.07 KBDolfAndringa

Comments

DolfAndringa created an issue. See original summary.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: Alignment of images in WYSIWYG CKEditor doesn't work because width doesn't get set on the parent figure » [upstream] Alignment of images in WYSIWYG CKEditor doesn't work because width doesn't get set on the parent figure
Status: Active » Postponed (maintainer needs more info)
Issue tags: +Needs upstream bugfix, +JavaScript

Thanks for reporting this!

This is then a bug in CKEditor itself. Could you try to reproduce it at https://ckeditor.com/ckeditor-4/#document?

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Component: editor.module » ckeditor.module

Version: 8.5.5 » 8.5.x-dev

Core issues are now filed against the dev versions where changes will be made. Document the specific release you are using in your issue comment. More information about choosing a version.

pameeela’s picture

pameeela commented
Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)
Issue tags: -JavaScript +Bug Smash Initiative

Thanks for reporting this issue. We rely on issue reports like this one to resolve bugs and improve Drupal core.

As part of the Bug Smash Initiative, we are triaging issues that are marked "Postponed (maintainer needs more info)".

I'm not able to reproduce this issue using the steps provided on 9.0.0. Selecting an image alignment adds the class and the image appears floated or aligned as expected. So I'm marking the issue "Closed (cannot reproduce)". If anyone can provide complete steps to reproduce the issue (starting from "Install Drupal core"), document those steps in the issue summary and set the issue status back to "Active".

Thanks!

localnetwork’s picture

localnetwork commented

Having this issue too when adding a caption to inline images, but when removing the caption works well.

pameeela’s picture

pameeela commented
StatusFileSize
new Screenshot 2020-06-25 08.14.26.png28.29 KB
new Screenshot 2020-06-25 08.14.26.png28.29 KB

Tried to reproduce this with captions but it's working as expected:

If anyone can provide specific steps to reproduce with Drupal core, please do!

pameeela’s picture

pameeela commented
StatusFileSize
new Screenshot 2020-06-25 08.14.42.png27.56 KB

Added wrong screenshot, here is the other one: