Fix Missing Floating Toolbar in Sitecore Experience Editor

The Experience Editor in Sitecore is the WYSIWYG Editor to build components in a page. When you want to see the options of a field or a component, you just simply click on it, and a toolbar pops up on top of it.

But what happens when one day, when you expect it to appear when clicking components or fields, it goes missing? You just simply scratch your head, right? Nope, not just yet, because it could be solved via javascript patch.

In our multisite-enabled Sitecore SXA instance, this scenario only happens in one of our sites. Upon initial investigation, it was thought to have been caused by some components that were not correctly defined as a ControllerRendering in SXA, in that Experience Editor may not recognize the ViewRenderings as a complete component due to lack of wrapping SXA component defining DIV tags. But even after converting it to ControllerRendering, it still did not work.

Upon further digging, the missing component was then isolated in some components that are wrappers to other components (i.e. Carousel or Video Container). Comparisons were made between other Tenant sites and components and one thing that struck as a difference is the presence of Slick Carousel JS library. It may have something to do in its CSS or javascript that messes up with the displaying of the floating toolbar.

Experience Editor hides the floating toolbar whenever you click on a different component or field. It assigns an inline style of -1000px to hidden components. But in this case, for components that have Slick attached to them, the -1000px is not removed, hence not displaying the floating toolbar.

You have these options:

• Remove the Slick Carousel javascript library and use another Carousel library
• Find the breaking code in Slick Carousel that messes up the code and fix it from there; or
• Patch the Sitecore javascript file that displays this floating toolbar

In this post, I will tackle on the third option which is to patch a Sitecore javascript file, because there are many instances of the carousel within the site and searching, modifying the Slick code, or changing it to anoother library may be more time consuming than just patching the glitch instantly.

So, locate the file called PositioningManager.js under the directory: /sitecore/shell/Applications/Page Modes/ and you can see these lines that hides the toolbar from view, usually in line 59 (Sitecore 9.1.1):

if ( this._getOverflow(chromeOffset.top, chromeOffset.left, chromeDimensions.width, chromeDimensions.height).isOutOfViewport) {
    return {top: chromeOffset.top + chromeDimensions.height + bottomMargin, left: -1000};
}

as well as in line 71:

 if (chromeOverflow.isOutOfViewport) {
    return {top: top, left: -1000};
 }

So, set the property left from value “-1000” to “left” and you’re good! Go back to your Experience Editor and check that the toolbars appear and disappear correctly. So far, we haven’t seen any unwanted side effects of this patch. To patch, create the same folder structure in your Visual Studio solution project and same file name with the changed left values. It will override the javascript file upon deployment.