I am seeing a weird behavior that I'm unable to debug in one of my custom components. The buttons that usually appear along the top of the dialog are all "hidden".
This is actually only happening to one component that I'm aware of, and only in staging and production, I cannot reproduce on my local dev environment.
It doesn't appear to be an error either, inspecting the source of the page reveals the following:
<div handle="headerContent" class=" coral3-Dialog-title coral-Heading coral-Heading--2" role="heading" aria-level="2" hidden>
So it looks like something is causing these controls to be hidden...no idea what though.
Anyone else ever run into anything like this and maybe know any threads I can tug at to try to unravel this mystery?
Solved! Go to Solution.
Views
Replies
Total Likes
Change title to jcr:title line 5
Hi @zachRuffin
Can you check if you are getting any console error or anything in the error log while opening the dialog?
Also do check if some scripts are overriding/blocking the functionality of core library which is running on staging and/or production.
Managing such script should resolves problem!
Regards,
Santosh
Hi @SantoshSai thanks, I didn't see any errors in the console or anything like that. The suspicious thing I noticed was that the buttons are set to hidden in the markup
Please share dialog xml.
Thanks for replying, here's the xml:
Attached correct touch ui xml below.
Please share Touch UI dialog, this is Classic UI dialog.
My apologies, I'm very new at AEM obviously, and I've inherited this project so I didn't build any of these controls. I found this under the _cq_dialog folder for the same component, hopefully this is the right XML.
<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/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" sling:resourceType="cq/gui/components/authoring/dialog" title="Column Control"> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <tabs jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/tabs" maximized="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <basic jcr:primaryType="nt:unstructured" jcr:title="Columns" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" margin="{Boolean}false"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <desktop jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" fieldDescription="Enter the no. of columns to be displayed on desktop" fieldLabel="Desktop" name="./desktopColumns" text="Desktop"> <items jcr:primaryType="cq:WidgetCollection"> <one jcr:primaryType="nt:unstructured" text="1" value="1"/> <two jcr:primaryType="nt:unstructured" text="2" value="2"/> <three jcr:primaryType="nt:unstructured" text="3" value="3"/> <four jcr:primaryType="nt:unstructured" text="4" value="4"/> <five jcr:primaryType="nt:unstructured" text="5" value="5"/> </items> </desktop> <tablet jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" fieldDescription="Enter the no. of columns to be displayed on tablet" fieldLabel="Tablet" name="./tabletColumns"> <items jcr:primaryType="cq:WidgetCollection"> <one jcr:primaryType="nt:unstructured" text="1" value="1"/> <two jcr:primaryType="nt:unstructured" text="2" value="2"/> <three jcr:primaryType="nt:unstructured" text="3" value="3"/> <four jcr:primaryType="nt:unstructured" text="4" value="4"/> <five jcr:primaryType="nt:unstructured" text="5" value="5"/> </items> </tablet> <border jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" fieldLabel="Border Radius" name="./borderRadius"> <items jcr:primaryType="nt:unstructured"> <def jcr:primaryType="nt:unstructured" text="(default)" value=""/> <_x0035_px jcr:primaryType="nt:unstructured" text="5px" value="5px"/> <_x0031_0px jcr:primaryType="nt:unstructured" text="10px" value="10px"/> <_x0031_5px jcr:primaryType="nt:unstructured" text="15px" value="15px"/> <_x0032_0px jcr:primaryType="nt:unstructured" text="20px" value="20px"/> </items> </border> <picker jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/colorfield" showDefaultColors="{Boolean}false" fieldLabel="Background color for Multi-column grid." name="./colorPicker"> <items jcr:primaryType="nt:unstructured"> <gray-90 jcr:primaryType="nt:unstructured" name="Gray 90" value="#404041"/> <gray-80 jcr:primaryType="nt:unstructured" name="Gray 80" value="#58595B"/> <gray-50 jcr:primaryType="nt:unstructured" name="Gray 50" value="#939598"/> <gray-25 jcr:primaryType="nt:unstructured" name="Gray 25" value="#C7C8CA"/> <gray-5 jcr:primaryType="nt:unstructured" name="Gray 5" value="#F1F2F2"/> <white jcr:primaryType="nt:unstructured" name="White" value="#FFFFFF"/> <yellow jcr:primaryType="nt:unstructured" name="Yellow" value="#FDB813"/> <red jcr:primaryType="nt:unstructured" name="Red" value="#AD1A1F"/> <blue-80 jcr:primaryType="nt:unstructured" name="Blue 80" value="#3B637E"/> <blue-50 jcr:primaryType="nt:unstructured" name="Blue 50" value="#008DB6"/> <blue-25 jcr:primaryType="nt:unstructured" name="Blue 25" value="#39C2D7"/> <blue-10 jcr:primaryType="nt:unstructured" name="Blue 10" value="#92D6E3"/> <ns-navy jcr:primaryType="nt:unstructured" name="NS Navy" value="#25395A"/> <ns-green-dark jcr:primaryType="nt:unstructured" name="NS Green Dark" value="#59807A"/> <ns-green-light jcr:primaryType="nt:unstructured" name="NS Green Light" value="#92B0AD"/> <ns-pink-dark jcr:primaryType="nt:unstructured" name="NS Pink Light" value="#BE7473"/> <ns-pink-light jcr:primaryType="nt:unstructured" name="NS Pink Light" value="#DDBAB8"/> <ns-beige-dark jcr:primaryType="nt:unstructured" name="NS Beige Dark" value="#CF9541"/> <ns-beige-light jcr:primaryType="nt:unstructured" name="NS Beige Light" value="#EEBD6A"/> <ns-yellow-dark jcr:primaryType="nt:unstructured" name="NS Yellow Dark" value="#D2BD4B"/> <ns-yellow-light jcr:primaryType="nt:unstructured" name="NS Yellow Light" value="#EAE196"/> </items> </picker> <opacity jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldDescription="The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent." fieldLabel="Opacity-(The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent)" name="./opacity"/> </items> </column> </items> </basic> </items> </tabs> </items> </content> </jcr:root>
Change title to jcr:title line 5
Thanks so much, I made this change and the problem has gone away.
In my local environment that title field is the same, but the touch ui doesn't have this problem, but that's a mystery I'm okay with leaving alone.
Change property name from
title="Column Control">
to
jcr:title="Column Control"
on cq:dialog node
Thank you for helping me solve this!
Two things:
1. you are sharing a touch ui dialog ,but xml file belongs to classic one.
2. to solve this issue just add jcr:title property in your touch ui dialog xml file just like this
jcr:title="your component name or any word"
sling:resourceType="cq/gui/components/authoring/dialog">
and this is happening because you might used the dialog conversion tool.
Hi @zachRuffin
I can see few properties (xtype, cq:widget etc.) belongs to classic UI, needed to correct it according to Touch UI something like below
<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/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="Multi Column" sling:resourceType="cq/gui/components/authoring/dialog"> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <tabs jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/tabs"> <items jcr:primaryType="nt:unstructured"> <tab1 jcr:primaryType="nt:unstructured" jcr:title="General" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <columns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <desktopColumns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" fieldDescription="Enter the no. of columns to be displayed on desktop" fieldLabel="Desktop" name="./desktopColumns"> <items jcr:primaryType="nt:unstructured"> <one jcr:primaryType="nt:unstructured" text="1" value="1"/> <two jcr:primaryType="nt:unstructured" text="2" value="2"/> <three jcr:primaryType="nt:unstructured" text="3" value="3"/> <four jcr:primaryType="nt:unstructured" text="4" value="4"/> <five jcr:primaryType="nt:unstructured" text="5" value="5"/> </items> </desktopColumns> <tabletColumns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" fieldDescription="Enter the no. of columns to be displayed on tablet" fieldLabel="Tablet" name="./tabletColumns"> <items jcr:primaryType="nt:unstructured"> <one jcr:primaryType="nt:unstructured" text="1" value="1"/> <two jcr:primaryType="nt:unstructured" text="2" value="2"/> <three jcr:primaryType="nt:unstructured" text="3" value="3"/> <four jcr:primaryType="nt:unstructured" text="4" value="4"/> <five jcr:primaryType="nt:unstructured" text="5" value="5"/> </items> </tabletColumns> </items> </columns> </items> </tab1> </items> </tabs> </items> </content> </jcr:root>
Regards,
Santosh