[MGNLUI-5018] Bug when inserting an image into the rich text editor of the Text and image component Created: 14/Feb/19  Updated: 27/Jan/21  Resolved: 17/Apr/19

Status: Closed
Project: Magnolia UI
Component/s: admincentral
Affects Version/s: 6.0
Fix Version/s: 6.1

Type: Bug Priority: Neutral
Reporter: Carlos Cantalapiedra Assignee: Milan Divilek
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File cover-div-lost.png     PNG File cover-div.png    
Issue Links:
causality
relation
is related to MGNLUI-5015 Keep CKEditor notifications on top of... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Release notes required:
Yes
Date of First Response:
Epic Link: Resurface finalisation
Sprint: Features 9
Story Points: 5

 Description   

At the CKEditor, the attempt to select an image from the server failed because the asset chooser is behind the image properties dialogue and therefore no image selection can be made.

Setps:

  1. Open a CkEditor
  2. Clic on the image thumbnail
  3. Clic on the button 'Select file'
  4. The 'Asset chooser' is opened behind the dialog, so no pick is possible


 Comments   
Comment by Carlos Cantalapiedra [ 11/Apr/19 ]

Hi,

Here is a workaround for this bug. Add the following snippet to the already existing configJsFile.js (this file does not exists by default, but If you are experiencing this bug it does in order you followed this guide)

$('body').on('DOMNodeInserted', 'div.v-window.v-widget.v-has-width.dialog.v-window-dialog', function(e) {
   if($('div.v-window.v-widget.v-has-width.dialog.v-window-dialog').length > 1) {
      $('.cke_dialog_background_cover').attr('style', 'z-index: 10000 !important;');
      $('.cke_dialog').each(function(index, obj) {
         obj.style.setProperty("z-index", "10000", "important");
      });
   }
});

This will make the assets selectable, there is only one thing that does not work as expected:  after selecting the asset (or canceling the dialog), we are loosing the "cover" div that was intended to block the TextAndImage dialog. Please check cover-div.png and cover-div-lost.png to see what I mean.

Apart from that, the component works as expected.

Comment by Dai Ha [ 22/Apr/19 ]

Verified with magnolia-enterprise-pro-demo-bundle-6.0.1-20190419.084627-881-tomcat-bundle.zip, asset can be chosen after the fix

Comment by Marc Johnen [ 23/Jul/20 ]

This bug still exists in 6.2.1

Comment by Francisco J. Giner [ 27/Jan/21 ]

Also exists in 6.2.5

Generated at Mon Feb 12 09:22:25 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.