Opened 9 years ago
Last modified 9 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
- Create a widget.
- Place several widgets inside.
- 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)
Change History (4)
comment:1 Changed 9 years ago by
Keywords: | widget nesting hover css removed |
---|---|
Status: | new → pending |
Version: | 4.5.7 |
comment:2 Changed 9 years ago by
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 9 years ago by
comment:3 Changed 9 years ago by
Status: | pending → confirmed |
---|
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.
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.