Opened 3 years ago

Last modified 3 years ago

#14515 confirmed Bug

Nested widget hover css selects all children

Reported by: Rycochet Owned by:
Priority: Normal Milestone:
Component: UI : Widgets Version:
Keywords: Cc:

Description

Steps to reproduce

  1. Create a widget.
  2. Place several widgets inside.
  3. Hover mouse over outer widget - all nested widgets get a yellow outline.

Expected result

Only the widgets being hovered over should get an outline.

Actual result

All children of the outermost widget get highlighted.

Other details (browser, OS, CKEditor version, installed plugins)

n/a

Fix

Currently the following css gets added to the page -

.cke_widget_wrapper:hover .cke_widget_editable {
	outline: 2px solid yellow;
}

Changing it to this fixes the issue -

.cke_widget_wrapper:hover > .cke_widget_editable {
	outline: 2px solid yellow;
}

Attachments (1)

hover.png (58.0 KB) - added by Jakub Ś 3 years ago.

Download all attachments as: .zip

Change History (4)

comment:1 Changed 3 years ago by Jakub Ś

Keywords: widget nesting hover css removed
Status: newpending
Version: 4.5.7

I can't confirm that. I have tried default full package with mathjax, simplebox and image2. I have placed image2 and mathjax inside simple box, unfocused all widgets (also tried with focus) and then hovered outer widget.
Result: Only outer widget is outlined.

Tested in FF, Chrome and IE.

EDIT: I have also tried mathjax inside image2 and it has worked as well.


  1. With what widgets are you able to reproduce it?
  2. Are you able to reproduce it in default preset or only inside some customized one with third-party plugins and core code modifications?
Last edited 3 years ago by Jakub Ś (previous) (diff)

comment:2 Changed 3 years ago by Rycochet

It's very specific to editable widgets within other custom editable widgets (in this case I've got a lot of them - and there's only a couple that aren't editable).

Unless you're testing something like a SimpleBox inside another SimpleBox it won't show up - the other widgets you mentioned don't actually have the "cke_widget_editable" class.

The specific line in the code is here - https://github.com/ckeditor/ckeditor-dev/blob/bd5101a8c6f7cee68895f751959848104adfe340/plugins/widget/plugin.js#L33 - all of the other hover lines in there specifically use the > child selector.

Standard CKEditor (hence the source link above) ;-)

Changed 3 years ago by Jakub Ś

Attachment: hover.png added

comment:3 Changed 3 years ago by Jakub Ś

Status: pendingconfirmed

I have set simplebox content area ACF rules to allowedContent: '' and tested this again.

I can't confirm that widget gets focused but its editables sure are (please see attached image).
I agree that it would be much better if only outer widget gets outlined if it is hovered and is nested widgets are left untouched.

NOTE: This happens also the other way around. Hovering nested widget results in outer widget editables to get outlined. This case is valid IMO because you are in fact hovering outer widget as well.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy