Toolbar Table Menu hidden behind other elements

[Robert]

Hello

I currently display a RichTextEditor in a popup DIV. the page has several DIV elements which I think is hiding the Table toolbar options.

If I click on the Table toolbar, it is hidden behind other elements. But the Font color and background color work proper opening on top. So I am thinking it is a layering issue?

Please see the image here for what I mean...

https://www.screencast.com/t/jRoy2rIhlz

Here is the code around the editor...

 </a>

      <div class="text-editor">

        <div class="date-main">

          <ejs-datetimepicker [value]="dateValue" id="Notedate" #Notedate placeholder="Date and Time"

            cssClass="e-outline" floatLabelType="Auto"></ejs-datetimepicker>

          <ejs-switch id="switchNote" [checked]="AdvanceNoteSswitch" (change)="switchChange($event)"></ejs-switch>

        </div>

        <ejs-uploader #defaultupload maxFileSize="10485760" name="AttachmentUpload" [files]="preLoadFiles_Advance"

          (uploading)="onUploadingAdvanced($event)" (selected)="onSelect($event)" [autoUpload]="true" [dropArea]="dropEle"

          [asyncSettings]="pathAdvance" (success)="onUploadSuccessAdvanced($event)" (failure)="onUploadFailureAdvanced($event)"

          (removing)="removeAttachmentFromAdvancedUpload($event)" (chunkUploading)="onChunkUploading($event)"></ejs-uploader>

        <span id="advance-editor-req-update" style="display: none; color: red;">You can't create blank Note.</span>

        <ejs-richtexteditor id="qwer" #createNoteTxt saveInterval="100" [(value)]="createNewNote"

          [pasteCleanupSettings]="pasteCleanupSettings" [toolbarSettings]="tools" [insertImageSettings]="imageSettings">

        </ejs-richtexteditor>

      </div>

      <ejs-richtexteditor id="textnote" #textnote saveInterval="100" (change)="OnTextNoteChange($event.value)"

        [(value)]="SimpleNewNote" [pasteCleanupSettings]="pasteCleanupSettings" [insertImageSettings]="imageSettings"

        [(quickToolbarSettings)]="quickToolbarSettings" name="notetext">

      </ejs-richtexteditor>

      <!-- <textarea rows="2" class="scroll-top" #textnote (keyup)="inputclass($event,textnote.value);" (keydown)="OninputDown($event);" (click)="OnClicktextnote($event,textnote.value)" id="textnote" name="notetext"></textarea> -->

      <div class="text-center loginmsg">

        <button class="a-center load-more-note" (click)="navigateToUserEmail()" id="btneditUserPurchaseStatus"

          style="background-color: red; display: none;">

          {{ this.UserloginMessage }}

        </button>

      </div>

[Indrajith Srinivasan]

Hi Robert, 

 

Greetings from the Syncfusion support, 

 

We have validated your reported query. We suspect the reported issue occurs due to the Rich Text Editor is not rendered properly or the corresponding page has higher Zindex element than the table popup. Can you please share us the following details, regarding the reported query ? 

 

• Have you placed the Rich Text Editor inside bootstrap dialog ?
• Have you enclosed the editor inside any other components ?
• Have you used any CSS, z-index style for the elements in the page ?

 

Sample: https://stackblitz.com/edit/angular-nvf4zk-g69s6e?file=app.component.html  

 

If possible, can you replicate the issue in the above shared sample so that we can validate and provide solution at earliest. 

 

Regards, 

Indrajith 

[Robert]

Hello

Thank you for the assistance and sorry for the late reply.

Using your initial code, I added a 2nd editor which does replicate the issue. 

As you can see in the video, when I click on the table option in the top editor, part of the table menu is hidden. 

When I click on the bottom one, you can see the "Insert Table" option.

So it looks like the z-index for the table menu is set back compared to other menu items like the font color. In the video, you can see me clicking on the top Font color and the full menu is displayed covered the bottom editor.

https://www.screencast.com/t/1mrmbntvuH

Here is an image highlighting what I mean...

https://www.screencast.com/t/8WOvKTA75E5

Update Code at: https://stackblitz.com/edit/angular-nvf4zk-tgk9dk?file=app.component.html

Thank you for your assistance.

Rob

[Indrajith Srinivasan]

Hi Robert, 

 

Thanks for the video demo and issue reproducing the sample, 

 

We have validated the reported query. The Table toolbar popup is hided, under the page with higher z-index elements. You can resolve the reported issue, by setting the second editor toolbar zindex as unset. Check the below modified sample for reference. 

 

CSS style: 

 

 

.e-richtexteditor .e-rte-toolbar, 

.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar { 

  z-index: unset; 

} 

 

 

Sample: https://stackblitz.com/edit/angular-nvf4zk-undfe5?file=app.component.css  

 

We have also considered “Table toolbar popup is hided, if page has higher zindex elements” as an bug from end and the fix will be included with our patch release on the 1^st week of January.  

 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further enquiries through this link: https://www.syncfusion.com/feedback/20824/  

 

Regards, 

Indrajith 

[Revanth Krishnan]

Hi Robert, 

 

 

Sorry for the inconvenience. 

 

We are currently facing complexity in implementing the fix “Table toolbar popup is hided, if page has higher zindex elements“ we will include this fix in our patch release scheduled on 3^rd February. 

 

We appreciate your patience till then. 

 

Regards, 

Revanth 

[Robert]

Hello

I just wanted to check in and see if there are any updates? I see that a new patch has not come out on the 3rd as expected.

Cheers

Rob

[Revanth Krishnan]

Hi Robert, 

 

 

Thanks for the patience. 

 

We have resolved the reported issue ”Table toolbar popup is hided, if page has higher zindex elements” with the package version 18.4.42.   

Can you please upgrade your package to this version to resolve the issue on your end?  

  

Release Notes: https://ej2.syncfusion.com/angular/documentation/release-notes/18.4.42/?type=all#richtexteditor 

  

Sample: https://stackblitz.com/edit/angular-nvf4zk-jq2g8c?file=app.component.ts 

     

Regards,     

Revanth    

[Robert]

Thank you!

This is now working as expected.

[Revanth Krishnan]

Hi Robert, 

 

Thanks for the update. 

 

We are glad that the reported issue has been resolved, please let us know if you need any further assistance. 

 

Regards, 

Revanth