Fixing dropdown cut in AEM 6.4

AEM 6.4 Touch UI generally works well, however in some situations you can find some issues that Adobe haven’t fixed.

This is a short post, as I found this issue recently and thought it was good to share.

In AEM 6.4 (and maybe other versions) if you only have one drop-down in the page properties, when trying to choose from the options, they will be cut, making it difficult for the author to select.

To fix this issue you can add a wrapper class to the field and import the the correct library.

Here’s how to do it.

  1. Add dependency client libs cq.authoring.editor.page to the dialog.
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Page properties"
          sling:resourceType="cq/gui/components/authoring/dialog"
          extraClientlibs="[cq.authoring.editor.page]"
          mode="edit">
</jcr:root>

2. Add property wrapperClass to field with class padding-b-10 margin-b-10

<myDropdown
		jcr:primaryType="nt:unstructured"
		sling:resourceType="granite/ui/components/coral/foundation/form/select"
		fieldLabel="My dropdown"
		wrapperClass="padding-b-10 margin-b-10"
		name="./myDropdown">
	<datasource
			jcr:primaryType="nt:unstructured"
			sling:resourceType="example/my-datasource" />
</myDropdown>

Hope this helps you building your AEM dialogs.

Get in touch on LinkedIn or leave comments for any questions or suggestions.

Leave a Reply