Continuing with our "Short Tips & Tricks" series we want to share a solution for an issue when authoring in AEM using Touch UI.
A problem we often encounter on fresh AEM implementations is the inability in authoring to click on the top toolbar while a component dialog is open. Why is this a problem? It prevents us from toggling the side-panel and accessing assets that would be useful to the component authoring. Obviously if the side-panel is already open then there is no issue.
Top section is blocked by overlay behind the dialog box.
The main drawback of this is not being able to drag an image/asset from the side-panel into an image field.
The solution is fairly simple, we need to override the properties of the overlay with custom css. We can achieve this with a few steps.
1 - Create a new node under clientlibs, the name of our new node is clientlib-authoring
2 - Inside the new node, create a file with the name content.xml, the structure should be like the image below. the important thing is the value of categories, which should be your site's name.
3 - Create another file inside the node named css.txt, here we indicate the custom css file we are going to use. then edit the file to have the following content:
#base=css
authoring.css
4 - Create a new child node named css and inside of this node let's create the css file called authoring*.css*.
5 - Finally, let's add the css that will override the overlay, what we want to do is to add some margin at the top of the overlay, enough to let us gain access to the top bar. The class of this overlay is .cq-dialog-backdrop.is-open, and the height of the top bar want to clear is 49px.
.cq-dialog-backdrop.is-open {
margin-top: 49px;
}
After following the previous steps, we have managed to make the top toolbar buttons accessible when a component dialog is open.
And this will allow us to make use of the drag and drop feature for images:
