Level 2

Solved

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

Forum|Forum|4 years ago
October 25, 2021
4 replies
3362 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Amit-Tiwari

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

SantoshSai

Community Advisor

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

Santosh Sai

zachRuffinAuthor

Level 2

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

Community Advisor

@zachruffin

Please share dialog xml.

zachRuffinAuthor

Level 2

Thanks for replying, here's the xml:

Attached correct touch ui xml below.

Amit-TiwariAccepted solution

Level 4

<?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

Amit-Tiwari

Level 4

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

Community Advisor

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

Santosh Sai

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded