Adobe Experience Manager Sites & More

OscarBr1 · 3/14/25

I have problems with the layering for the pop-ups when you click a RTE functionality into a dialog. How can I solve it?

image#imageProps, links#anchor

giuseppebag · 3/14/25

hi @OscarBr1, Could you please share the code you have used so far? Otherwise it will be very difficult to help you.

OscarBr1 · 3/14/25

This is the .content.xml for the _cq_dialog, is a custom component. No core components being inherited.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="Properties"
          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">
               <Properties
                       jcr:primaryType="nt:unstructured"
                       jcr:title="Properties"
                       sling:resourceType="granite/ui/components/coral/foundation/container"
                       margin="{Boolean}true">
                  <items jcr:primaryType="nt:unstructured">
                     <columns
                             jcr:primaryType="nt:unstructured"
                             sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                             margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                           <column
                                   jcr:primaryType="nt:unstructured"
                                   sling:resourceType="granite/ui/components/coral/foundation/container">
                              <items jcr:primaryType="nt:unstructured">
                                 <title
                                         jcr:primaryType="nt:unstructured"
                                         sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                         fieldLabel="Announcement Title"
                                         fieldDescription="Title of the announcement"
                                         name="./title"
                                         required="{Boolean}true"/>
                                 <shortDescription
                                         jcr:primaryType="nt:unstructured"
                                         sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                         fieldLabel="Announcement Short Description"
                                         fieldDescription="Short Description of the Announcement to be used in aria-describedby"
                                         name="./shortDescription"/>
                                 <body
                                         jcr:primaryType="nt:unstructured"
                                         sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                         fieldLabel="Announcement Body"
                                         fieldDescription="Body content of the announcement"
                                         externalStyleSheets="[/apps/clientlibs/author/components/text/css/text.bundle.css]"
                                         name="./body"
                                         useFixedInlineToolbar="{Boolean}true">
                                    <rtePlugins jcr:primaryType="nt:unstructured">
                                       <image features="*" jcr:primaryType="nt:unstructured"/>
                                       <edit features="*" jcr:primaryType="nt:unstructured"/>
                                       <format features="*" jcr:primaryType="nt:unstructured"/>
                                       <justify features="*" jcr:primaryType="nt:unstructured"/>
                                       <links features="*" jcr:primaryType="nt:unstructured"/>
                                       <lists features="*" jcr:primaryType="nt:unstructured"/>
                                       <paraformat jcr:primaryType="nt:unstructured">
                                          <formats jcr:primaryType="nt:unstructured">
                                             <default_p
                                                     jcr:primaryType="nt:unstructured"
                                                     description="Paragraph"
                                                     tag="p"/>
                                             <default_h1
                                                     jcr:primaryType="nt:unstructured"
                                                     description="Heading 1"
                                                     tag="h1"/>
                                             <default_h2
                                                     jcr:primaryType="nt:unstructured"
                                                     description="Heading 2"
                                                     tag="h2"/>
                                             <default_h3
                                                     jcr:primaryType="nt:unstructured"
                                                     description="Heading 3"
                                                     tag="h3"/>
                                             <default_h4
                                                     jcr:primaryType="nt:unstructured"
                                                     description="Heading 4"
                                                     tag="h4"/>
                                          </formats>
                                       </paraformat>
                                       <styles features="*" jcr:primaryType="nt:unstructured">
                                          <styles jcr:primaryType="cq:WidgetCollection">
                                             <alternativeFont jcr:primaryType="nt:unstructured"
                                                              cssName="text__font--alternative"
                                                              text="Alternative font: Montserrat"/>
                                             <standAloneLink jcr:primaryType="nt:unstructured"
                                                             cssName="text--link"
                                                             text="Stand-alone Link"/>
                                             <smallBodyText jcr:primaryType="nt:unstructured"
                                                            cssName="text__size--small"
                                                            text="Small body text"/>
                                             <highlight jcr:primaryType="nt:unstructured"
                                                        cssName="text__color--highlight"
                                                        text="Highlight"/>
                                          </styles>
                                       </styles>
                                       <subsuperscript features="*" jcr:primaryType="nt:unstructured"/>
                                       <table features="*" jcr:primaryType="nt:unstructured">
                                          <defaultValues
                                                  jcr:primaryType="nt:unstructured"
                                                  width="100"/>
                                       </table>
                                       <undo features="*" jcr:primaryType="nt:unstructured"/>
                                    </rtePlugins>
                                    <uiSettings jcr:primaryType="nt:unstructured">
                                       <cui jcr:primaryType="nt:unstructured">
                                          <inline
                                                  jcr:primaryType="nt:unstructured"
                                                  toolbar="[#format,#justify,table#table,#lists,image#imageProps,links#modifylink,links#unlink,links#anchor,#styles,#paraformat,#edit,undo#undo,undo#redo,fullscreen#start,control#close,control#save]">
                                             <popovers jcr:primaryType="nt:unstructured">
                                                <format
                                                        jcr:primaryType="nt:unstructured"
                                                        items="[format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript]"
                                                        ref="format"/>
                                                <justify
                                                        jcr:primaryType="nt:unstructured"
                                                        items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                                        ref="justify"/>
                                                <lists
                                                        jcr:primaryType="nt:unstructured"
                                                        items="[lists#unordered,lists#ordered]"
                                                        ref="lists"/>
                                                <styles
                                                        jcr:primaryType="nt:unstructured"
                                                        items="styles:getStyles:styles-pulldown"
                                                        ref="styles"/>
                                                <paraformat
                                                        jcr:primaryType="nt:unstructured"
                                                        items="paraformat:getFormats:paraformat-pulldown"
                                                        ref="paraformat"/>
                                                <edit
                                                        jcr:primaryType="nt:unstructured"
                                                        items="[edit#cut,edit#copy,edit#paste-default,edit#paste-plaintext,edit#paste-wordhtml]"
                                                        ref="edit"/>
                                             </popovers>
                                          </inline>
                                          <dialogFullScreen
                                                  jcr:primaryType="nt:unstructured"
                                                  toolbar="[#format,#justify,table#table,#lists,image#imageProps,links#modifylink,links#unlink,links#anchor,#styles,#paraformat,#edit,undo#undo,undo#redo,fullscreen#start,control#close,control#save]">
                                             <popovers jcr:primaryType="nt:unstructured">
                                                <format
                                                        jcr:primaryType="nt:unstructured"
                                                        items="[format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript]"
                                                        ref="format"/>
                                                <justify
                                                        jcr:primaryType="nt:unstructured"
                                                        items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                                        ref="justify"/>
                                                <lists
                                                        jcr:primaryType="nt:unstructured"
                                                        items="[lists#unordered,lists#ordered]"
                                                        ref="lists"/>
                                                <styles
                                                        jcr:primaryType="nt:unstructured"
                                                        items="styles:getStyles:styles-pulldown"
                                                        ref="styles"/>
                                                <paraformat
                                                        jcr:primaryType="nt:unstructured"
                                                        items="paraformat:getFormats:paraformat-pulldown"
                                                        ref="paraformat"/>
                                                <edit
                                                        jcr:primaryType="nt:unstructured"
                                                        items="[edit#cut,edit#copy,edit#paste-default,edit#paste-plaintext,edit#paste-wordhtml]"
                                                        ref="edit"/>
                                             </popovers>
                                          </dialogFullScreen>
                                          <icons jcr:primaryType="nt:unstructured">
                                             <edit jcr:primaryType="nt:unstructured"
                                                   command="#edit"
                                                   icon="textEdit"/>
                                          </icons>
                                       </cui>
                                    </uiSettings>
                                    <granite:data
                                            jcr:primaryType="nt:unstructured"
                                            cq-msm-lockable="./body"/>
                                 </body>
                                 <buttonLabel
                                         jcr:primaryType="nt:unstructured"
                                         sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                         fieldLabel="Button Label"
                                         fieldDescription="Text shown in the button"
                                         value="Cerrar"
                                         name="./buttonLabel"
                                         required="{Boolean}true"/>
                              </items>
                           </column>
                        </items>
                     </columns>
                  </items>
               </Properties>
            </items>
         </tabs>
      </items>
   </content>
</jcr:root>

AmitVishwakarma · 3/14/25

Hi @OscarBr1 ,

Here are some steps to troubleshoot and fix the issue:

Possible Causes & Fixes:

1. Ensure the RTE is inside a proper Granite UI container
     - The <body> field is correctly using cq/gui/components/authoring/dialog/richtext, but sometimes dialogs inside nested containers can have layering issues.
     - Try moving the RTE field outside extra nesting to see if the layering improves.

2. Add the correct z-index for popups
     - AEM dialogs use Coral UI, and sometimes the popups appear behind the modal due to missing z-index.
     - Try adding this CSS in your clientlibs:

.coral-RichText-popover {
    z-index: 9999 !important;
}

This ensures popups always appear on top.

3. Use cq:dialogFullscreen instead of inline toolbar

- Since you have useFixedInlineToolbar="{Boolean}true", try using fullscreen mode instead:

<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[#format,#justify,table#table,#lists,image#imageProps,links#modifylink,links#unlink,links#anchor,#styles,#paraformat,#edit,undo#undo,undo#redo,fullscreen#start,control#close,control#save]"
    />
  </cui>
</uiSettings>

This ensures popups appear properly inside the dialog.

4. Check if any other styles are interfering

     - Open Developer Console (F12 → Inspect the popups).
     - Check if there’s a display: none or visibility: hidden issue in CSS.
     - If so, try overriding it using:

.coral-RichText-popover {
    display: block !important;
    visibility: visible !important;
}

Regards,
Amit Vishwakarma

OscarBr1 · 4/2/25

Hi! Thank you for your response, I couldn't make it work using that approach.

kautuk_sahni · 4/1/25

@OscarBr1 Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

Kautuk Sahni

OscarBr1 · 4/2/25

Hi! We finally opted to maintain the image plugin in the middle of the toolbar, allowing us to use all the functionalities but the layering issues persist.

Adobe Experience Manager Sites & More

Layering for rich text field RTE plugins into the component dialog is not working

Kautuk Sahni

Learn

Documentation

Events

Community

Support

Resources

Adobe account

Adobe