Help, Toggle Full Screen, Cancel, and Done buttons are not visible in my custom dialog

[zachRuffin]

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?

[SantoshSai]

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 

[zachRuffin]

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 🤔

[Anudeep_Garnepudi]

@zachRuffin 

Please share dialog xml.

[zachRuffin]

Thanks for replying, here's the xml:

Attached correct touch ui xml below.

[Anudeep_Garnepudi]

Please share Touch UI dialog, this is Classic UI dialog.

[zachRuffin]

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>

[Amit-Tiwari · Accepted solution]

Change title to jcr:title line 5

[zachRuffin]

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.

[Anudeep_Garnepudi]

Change property name from

title="Column Control">

to

jcr:title="Column Control" 

on cq:dialog node

[zachRuffin]

Thank you for helping me solve this!

[Amit-Tiwari]

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.

[SantoshSai]

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