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

Forum|Forum|10 months ago
March 14, 2025
3 replies
558 views

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

giuseppebaglio

Level 10

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

OscarBr1Author

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

Community Advisor

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

OscarBr1Author

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

kautuk_sahni

Community Manager

@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

OscarBr1Author

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded