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.
- Add dependency client libs
cq.authoring.editor.pageto 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
<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.