CSS reference to the TinyMCE “absolute position” handle?

  • Resolved korythewebguy

    (@korythewebguy)


    14 years, 10 months 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:
    https://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! ??

Viewing 2 replies - 1 through 2 (of 2 total)

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

    Thread Starter korythewebguy

    (@korythewebguy)

    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. ??

    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.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS reference to the TinyMCE “absolute position” handle?’ is closed to new replies.