The editor's hover controls CSS can be overridden by theme CSS containing "#something ul" selector.
ZebulanStanphill opened this issue · 1 comments
ZebulanStanphill commented
Description
The CSS for the styling of the on-hover controls in the Elementor editor appear to use selectors that are too weak, resulting in something as generic as a check for "#something ul" overriding the CSS.
I noticed this while trying out the Elementor editor on a site using the Divi theme, though it is not a Divi-specific issue. It affects any theme that does the following:
- Have CSS to define the padding of a ul tag that is a descendant of an element with a particular id. ("#something ul")
- Uses that CSS id on an element used on every page, such as the div containing the content of the page.
(Note: I have checked, and a ".something ul" selector does NOT override the CSS, which is good.)
Steps to reproduce
- Use a theme whose base CSS defines padding for ul tags that are descendants of an element with a certain id. (Set the padding to be something that will appear obvious when it is applied.)
- Use the Elementor editor on a page where the on-hover controls will be descendants of an element with the aforementioned id, and look at the hover controls.
Easy version:
- Use the Divi theme. (I tested on the latest version as of posting: 3.0.72, though I don't think this behavior should be any different on older/newer versions.)
- Use the Elementor editor on a page and look at the hover controls.
arielk commented
Fix for v1.7.3.
Thanks for your feedback!