WordPress.org

1. korythewebguy
   Member
   Posted 2 years ago #

   This question seems simple enough, if not a little embarrassing that I can't figure it out myself...

   I'm trying to discover the CSS reference(s) to the handle which appears in TinyMCE editor & lets you move an absolutely-positioned element.

   Here's a screenshot in case I'm not being very clear:
   http://i.imgur.com/h2JQ1.jpg

   I ask because I need to configure the element's Z-INDEX property to be higher - Otherwise the handle constantly disappears below other absolutely-positioned elements in the editor.

   Even after running various GREP searches over all of the WordPress PHP / CSS / JS files, using FireFox's 'Web Developer' plugin to pinpoint the element (doesn't work), OR looking for the element's icon among all of the GIFs/PNGs included with WordPress, I'm still unable to figure it out.

   Any insights, suggestions or answers are very greatly appreciated - Many genuine thanks to all who take the time to reply! :-)

2. Mark / t31os
   Moderator
   Posted 2 years ago #

   I think that's something to do with TinyMCE advanced, i don't see the utility you're using in the standard editor.

3. korythewebguy
   Member
   Posted 2 years ago #

   Well, I figured it out... I think.

   The element seems to actually be part of the Mozilla code, technically referred to as a "grabber", and comes from within the Mozilla built-in WYSIWYG resources.

   Here's the breakdown:

   *[\_moz_resizing] « Class applied to an element being resized
   *[\_moz_abspos] « Class applied to an absolutely-positioned element
   span[\_moz_anonclass="mozGrabber"] « The class for the "absolute position" handle (aka "grabber") I referred to above.

   Using the Firefox 'Web Developer' plugin, I noticed the classes _moz_abspos and _moz_resizing being added to absolutely-positioned elements when I clicked on them.

   Plugging those classes into Google led me to find a CSS file called "EditorOverride" that's being used on the OpenCD project.

   As it turns out, these elements can still be styled with CSS. :D

   So I just inserted the following into the /plugins/tinymce-advanced/css/tadv-styles.css file and now the grabber is layered above everything else:

   span[\_moz_anonclass="mozGrabber"]{z-index: 2147483646 !important;}

   WORTH NOTING: I used the number 2147483646 because Mozilla WYSIWYG assigns a z-index of 2147483645 to the absolutely-positioned element. Also, 2147483647 is the maximum z-index in most web browsers because it's the largest possible 32-bit integer value. Any number higher than 2147483647 will automatically revert back to 2147483647.

Topic Closed

This topic has been closed to new replies.